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

转载:

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

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

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

<ul style="overflow:hidden;zoom:1" >
  @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>
时间: 2024-10-10 07:00:48

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

ul中的li设置等宽高css

响应式布局中宽度与高度相同 纯css方法设置ul中li宽高相等 关键词:VW / VH vw:视窗的宽度 vh:视窗的高度 思路:根据vw获取视图宽度从而设置li的宽度等于高度 代码: <li> <div class="test"> <img src="../images/hm1.png" > <div> <h3>Sponge material</h3> </div> </di

ul 中的li取值问题

ul 中的li定义的value会自动转换为int.数值,ie 浏览器下大于int最大值,显示int最大值,其他浏览器显示为0. 而且无论你定义什么值,都会转int.默认为1,例如value=中文. 所以如果你想要实现正确取值,就需要换一个li属性例如自定义属性time.或者改一种实现标签元素,例如div.都可以. 也可以在li中定义一个隐藏的input,然后取值:

点击ul中的li弹出其索引值

html结构 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> JQuery实现: $("ul").on("click","li",function(){ var index=$("li").index($(this)); alert(index)

多个ul中第一个li获取定位

多个ul中第一个li获取定位 如果我们只是获取一个ul中的第一个li的话,那么我们可以这样写: $("ul li:first"); $("ul li").eq(0); $("ul li").first(); $("ul li").slice(0,1);//slice第一个参数表示的选取开始的位置,第二个参数是结束的位置 <ul> <li>安哲</li> <li>安哲</li

选中多个&lt;ul&gt;中的第一个&lt;li&gt;方法

获取第一个ul中的第一个li标签的方法: //获取第一个ul中的第一个li /* $("ul li:first").css("background","pink"); $("ul li").eq(0).css("background","pink"); $("ul li").first().css("background","pink&q

css基础 去除ul,li无序列表前面的符号

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

Jquery和JS获取ul中li标签

js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElementsByTagName("ul"); var itemss=items[2].getElementsByTagName("li");//获取第二个li标签 或 var div=document.getElementById('a'); var ul=div.childN

jquery获取ul中的第一个li

$("ul li:first"); $("ul li").eq(0);$("ul li").first();$("ul li").slice(0,1);//slice第一个参数表示的选取开始的位置,第二个参数是结束的位置 <script type="text/javascript">//方案一$(function(){var list=$("ul");for (var i =

如何使ul中li元素横向排列且不换行

外层div容器宽度固定,ul宽度随li(li宽度固定)的增加而撑开,但是当ul中li的宽度之和大于div时,ul没有撑开,而是li换行了,如何使li不换行? 解决方法:主要是外面容器设置为white-space:nowrap:li设置为display:inline-block:而不是float:left: <!DOCTYPE html> <html> <head> <style> #pic_list { display:block; white-space: