CSS------如何让ul中的li分为两列甚至多列

时间:2023-02-15 23:01:15

转载:

http://blog.sina.com.cn/s/blog_7f13f92a0100rkfg.html

只需要复制ul和li中的style样式即可

如果需要自定义多少列,只需要修改li中的with属性即可

<ul style="overflow:hidden;zoom:" >
  @foreach (IGrouping<string, RegionInfo> item in ViewBag.Area)
  {
    <li style="float:left;width:300px;padding:5px">
      <span style="color:red;font-size:20px">@item.Key</span>
      @foreach (var entity in item)
      {
        <a class="province" style="font-size:15px;color:#333;cursor:pointer">@entity.Name<input type="hidden" value="@entity.RegionId"/></a>
      }
    </li>
  }
</ul>

CSS------如何让ul中的li分为两列甚至多列的更多相关文章

  1. 给ul中的li添加事件的多种方法

    给ul中的li添加事件的多种方法 这是一个常见,而且典型的前端面试题 <ul> <li>11111</li> <li>22222</li> ...

  2. 导航栏的ul中的li设置问题

    在css中 设置li的float:left 可以实现列表在同一行显示 设置每个li的宽度相等,可以实现每个列表的分离状态. 设置每个li中的文字,text-align:center; 可实现每个列表的 ...

  3. js遍历(获取)ul中的li

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. 图片懒加载--判断div ul中的li是否已经滑动到可视区域里

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  5. 安插,复制,替换和删除ul中的li

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 使ul中的li居中

    1.如果li设置了float:left; 解决办法: 1.ul父元素的标签设置:text-align: center; 2.ul设置: display: inline-block; 2.li不设置fl ...

  7. 数组中的数分为两组,让给出一个算法,使得两个组的和的差的绝对值最小,数组中的数的取值范围是0&lt&semi;x&lt&semi;100,元素个数也是大于0, 小于100 。

    比如a[]={2,4,5,6,7},得出的两组数{2,4,6}和{5,7},abs(sum(a1)-sum(a2))=0: 比如{2,5,6,10},abs(sum(2,10)-sum(5,6))=1 ...

  8. 对Ul下的li标签执行点击事件——如何获取你所点击的标签

    问题所来:做项目时,一般的数据都是用循环动态加载出来的,结构都是一样的,只是绑定的值不同,如何对相同的标签做处理的问题就来了. 例如:点谁就显示谁的数值 <ul > <li id=& ...

  9. css中的 nav ul li ul 与 nav&gt&semi;ul&gt&semi;li 这两种写法的区别

    <nav> <ul id="a"> <li>a1</li> <li>a2</li> <li>a3 ...

随机推荐

  1. hangfire&plus;bootstrap ace 模板实现后台任务管理平台

    前言 前端时间刚开始接触Hangfire就翻译了一篇官方的教程[翻译+山寨]Hangfire Highlighter Tutorial,后来在工作中需要实现一个异步和定时执行的任务管理平台,就结合bo ...

  2. Windows下Memcache的安装及PHP扩展配置

    一.下载 找到完整的memcache的Windows安装包,解压放在硬盘上,比如 F:\memcached.exe 二.安装 WIN7 64位双击打开这个exe可能只有一个空的窗口,不能输入任何命令, ...

  3. shiro的简单使用

    <?xml version="1.0" encoding="utf-8"?> <web-app xmlns:xsi="http:// ...

  4. 排队打饭 sdut 2443【最简单的贪心法应用举例】

    排队打饭 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 题目链接:http://acm.sdut.edu.cn/sdutoj/p ...

  5. 3D动画

    先上一道菜 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. 【转】jmeter 进行java request测试

    本周使用jmeter进行一个远程dubbo接口的性能测试,因为没有访问页面,本来开发可以写一个页面,进行http请求的调用,不过已经看到jmeter可以直接对java request进行测试,所以尝试 ...

  7. 阿里巴巴笔试整理系列 Session2 高级篇

    阿里一面:1. 入场就是红黑树,B数2. apache和nginx源码看过多少,平时看过什么技术论坛,还有没有看过更多的开源代码3. pthread 到自旋锁4. hadoop源码看过没5. 为什么选 ...

  8. Win10 10586 更新

    最近发现,电脑c盘突然少了许多,发现c盘多了个windowsBT文件夹,大概6个G,恩,win10 又推出更新了,版本10586. 不知道为啥,更新时win10 把原来的下载的删除了,大概出了什么错误 ...

  9. memmove 和 memcpy的区别以及处理内存重叠问题

    区别: memcpy和memmove()都是C语言中的库函数,在头文件string.h中,作用是拷贝一定长度的内存的内容,原型分别如下: void *memcpy(void *dst, const v ...

  10. &commat;PostConstruct和&commat;PreDestroy注解

    从Java EE5规范开始,Servlet增加了两个影响Servlet生命周期的注解(Annotation):@PostConstruct和@PreConstruct.这两个注解被用来修饰一个非静态的 ...