找了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. SimpleHttpServer的学习之UML

    如何分析一个稍微大点的源码呢? 静态分析 除了看代码,就是 uml图,UML虽然在书本类与类之间的关系很复杂,可能要一本书,但是最核心的其实很简单: (1)继承 extends (2)实现接口 imp ...

  2. 深度学习-使用cuda加速卷积神经网络-手写数字识别准确率99.7%

    源码和运行结果 cuda:https://github.com/zhxfl/CUDA-CNN C语言版本参考自:http://eric-yuan.me/ 针对著名手写数字识别的库mnist,准确率是9 ...

  3. 机器学习-----线性回归浅谈（Linear Regression）

    Linear Regreesion          在现实生活中普遍存在着变量之间的关系,有确定的和非确定的.确定关系指的是变量之间可以使用函数关系式表示,还有一种是属于非确定的(相关),比如人的身 ...

  4. FFmpeg YUV视频序列编码为视频

    上一篇已经写了如何配置好开发环境,这次就先小试牛刀,来个视频的编码.搞视频处理的朋友肯定比较熟悉YUV视频序列,很多测试库提供的视频数据都是YUV视频序列,我们这里就用用YUV视频序列来做视频.关于Y ...

  5. 10行Java代码实现最近被使用（LRU）缓存

    在最近的面试中,我曾被多次问到,怎么实现一个最近最少使用(LRU)的缓存.缓存可以通过哈希表来实现,然而为这个缓存增加大小限制会变成另一个有意思的问题.现在我们看一下怎么实现. 最近最少使用缓存的回收 ...

  6. 【PAT Advanced Level】1004. Counting Leaves (30)

    利用广度优先搜索,找出每层的叶子节点的个数. #include <iostream> #include <vector> #include <queue> #inc ...

  7. android中常用的尺寸单位及其关系

    1 尺寸单位定义 px(pixel,像素):每个px对应屏幕上的一个点 dip或dp(device independent pixels,设备独立像素):一种基于屏幕密度的抽象单位.在每英寸160个点 ...

  8. MSSQLSERVER数据库- SQL删除重复数据的五种方式

    删除重复的数据,在平时的工作中还是会和碰到的,感觉挺有用,从网上摘录的,记在这里,以备需要时查阅 --方法一,IN方式,适合2000/2005/2008,6728 毫秒 DELETE [student ...

  9. 清空session的方法

    清空session的方法,常用来注销的时候清空所有的session. 方法一: Enumeration e=session.getAttributeNames(); while(e.hasMoreEl ...

  10. 对PostgreSQL cmin和cmax的理解

    看例子: 开两个终端来对比: 在终端A: [pgsql@localhost bin]$ ./psql psql () Type "help" for help. pgsql=# b ...