找了li 如何水平排列并自动填满 ul，同时 li 宽度平均？资料，里面有提到"请用js动态计算保证兼容性"，

因为我想实现的是，水平滚动条，ul的上级div是固定的宽度1000px, 我就想到用jquery 获取每个li的高度，ul的宽度等于每个li的宽度.

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

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head >

     <title>index.html</title>

     <meta name="description" content="Hello world">

     <!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->

     <script src="http://ajax.useso.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

     <style type="text/css">

         #category{

             width:1000px;

             height:54px;

             border:1px solid red;

             overflow-x:auto;

             overflow-y:hidden;

         }

         #category ul{

             margin:0px;

             padding:0px;

             list-style:none;

             /**float:left;和overflow:hidden;是为了让ul的宽度为实际宽度,具体的区别，我还待学习**/

             overflow:hidden;

         }

         #category ul li{

             float:left;

             margin:0px 10px;

             padding:10px;

             border:red;

         }

     </style>

 </head>

 <body>

     <div id="category">

         <ul>

             <li>Test</li>

             <li>Test12321321</li>

             <li>Test111</li>

             <li>Test11</li>

             <li>Test</li>

             <li>Test</li>

             <li>Test</li>

             <li>Test</li>

             <li>Test</li>

             <li>Test</li>

             <li>Test</li>

             <li>Test</li>

             <li>Test</li>

             <li>Test</li>

         </ul>

     </div>

     <script type="text/javascript">

         jQuery(function($){

             var ul_width = 0 ;

             $("#category ul li").each(function(index,value){

                 var width = $(value).width();

                 //40是padding-left + padding-right + margin-left + margin-left

                 ul_width += (width + 40);

                 //console.log(width);

             });

             $("#category ul").width(ul_width);

         });

     </script>

 </body>

 </html>

最终的效果图是:

li 水平排列并自动填满 ul的更多相关文章

  1. [WP8] ListBox的Item宽度自动填满

    [WP8] ListBox的Item宽度自动填满 范例下载 范例程序代码:点此下载 问题情景 开发WP8应用程序的时候,常常会需要使用ListBox作为容器来呈现各种数据集合.但是在ListBox呈现 ...

  2. ext:grid分页，列宽度自动填满grid宽度

    var cm = new Ext.grid.ColumnModel([{      header : '编号',      dataIndex : 'id'     }, {      header ...

  3. css怎么让li水平排列和div居中

    让li向左浮动即可 给div定一个宽度,然后margin:0 auto;即可:

  4. 两个DIV，左DIV宽度固定，右DIV自动填满剩余空间

    <style type="text/css"> #main{ width:98%; } #sidebar{ float:left; width:200px; backg ...

  5. css布局------左边宽度不定,右边宽度自动填满剩余空间

    HTML <div class="container"> <div class="left"></div> <div ...

  6. -webkit-box 高度自动填满

    <style> .box{ display: -webkit-box; -webkit-box-orient: vertical; height: 200px; background: # ...

  7. 手机H5，用Jquery使图片自动填满两栏式排版

    遇上这样的排版,手机的解象度都不同,假如只用CSS3根本就做不出这样的排版:因此要用Jquery. 1. HTML <div class="postImgCenterCrop" ...

  8. ul li横向排列及圆点处理

    如何用CSS制作横向菜单 让ul li横向排列及圆点处理   第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...

  9. CSS + ul li 横向排列的两种方法

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

随机推荐

  1. 深入浅出 JavaScript 数组 v0.5

    有一段时间不更新博客了,今天分享给大家的是一篇关于JS数组的,数组其实比较简单,但是用法非常灵活,在工作学习中应该多学,多用,这样才能领会数组的真谛. 以下知识主要参考<JS 精粹>和&l ...

  2. 关于图像读取函数imread()的一点使用经验，注意默认参数的赋值

    读入数字图像到数组,用CNN进行训练,发现关于图像读取的一个问题. 问题描述:读取灰度数字图像,在验证时发现存在错误,从图像到数组中的值不完全一样? main code as follows: int ...

  3. Aisino 金税盘 pass throught

  4. sublime text2注册码

    ----- BEGIN LICENSE ----- Andrew Weber Single User License EA7E-855605 813A03DD 5E4AD9E6 6C0EEB94 BC ...

  5. ACCESS-字符函数

    mid:等于delphi中的COPY举例str="123456"mid(str,2,1)的意思是在str字符串中从第2个字符开始取得一个字符,结果为2注意:下标是从1开始,而不是从 ...

  6. Javascript注意事项四【提高循环性能的策略】

    for(var i = item.length;i--){ process(item[i]); } 1.通过倒叙循环 2.最小化属性查询 3.尽量不要使用函数迭代(forEach)

  7. Redis集群的使用测试（Jedis客户端的使用）

    Redis集群的使用测试(Jedis客户端的使用)1.Jedis客户端建议升级到最新版(当前为2.7.3),这样对3.0.x集群有比较好的支持.https://github.com/xetorthio ...

  8. C#基础知识之方法重载总结

    1．首先解释一下什么是方法重载?    方法重载是指在同一个类中方法同名,参数不同,调用时根据实参的形式,选择与他匹配的方法执行操作的一种技术. 这里所说的参数不同是指以下几种情况: ①  参数的类型 ...

  9. HDU 5493 Queue 树状数组

    Queue Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5493 Des ...

  10. 并行编程之多线程共享非volatile变量，会不会可能导致线程while死循环

    背景 大家都知道线程之间共享变量要用volatilekeyword.可是,假设不用volatile来标识,会不会导致线程死循环?比方以下的伪代码: static int flag = -1; void ...