找了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. 解决：Eclipse导入工程后全是错误，连基本类型都不识别

    当初在大学没时间完成作业时,总是喜欢网上搜一个或者拷贝同学的一个工程过来,导入到Eclipse中却全是红叉,连基本类型都不识别. 当时就纳闷了,难道是天要亡我之心不死?后来慢慢了解了,其实是导入的工程 ...

  2. 不适用临时空间，交换变量a和b

    方法1: a = a + b; b = a - b; a = a - b; 方法2: a ^= b; b ^= a; a ^= b; 方法3: a = a * b; b = a / b; a = a  ...

  3. 关于main()和_tmain()

    1.两者的共同点 int _tmain(int argc, _TCHAR* argv[])    和  int main(int argc, char* argv[])  ,两者都是程序的主函数,两者 ...

  4. [iOS基础控件 - 4.1] APP列表

    需求 1.以N宫格的形式展示应用信息 2.APP信息包括图标.名字.下载按钮 3.使用尽可能少的代码,从plist读取app信息,计算每个app图标的位置尺寸信息     A.思路 1.UI布局:N宫 ...

  5. 转载StringBuilder说明

    动态串StringBuilder 利用System.Text.StringBuilder类实现动态字符串,动态的含义是指在修改字符串时,系统不需要创建新的对象,不会重复开辟新的内存空间,而是直接在原来 ...

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

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

  7. Codeforces 390Div2-754D. Fedor and coupons（贪心+优先队列）

    D. Fedor and coupons time limit per test 4 seconds memory limit per test 256 megabytes input standar ...

  8. 【Stage3D学习笔记续】山寨Starling（七）：一般优化方法简介及混合模式

    关于事件的优化: 遍历注册的事件由foreach改变为fori,在大量数据遍历时会有提升: 事件池优化: 所有的事件都使用一个对象池进行保存,而不是使用到时进行创建,使用EventDispatcher ...

  9. Java编程 -- 命名规范

    转自:http://www.hawstein.com/posts/google-java-style.html#Naming 命名约定 5.1 对所有标识符都通用的规则 标识符只能使用ASCII字母和 ...

  10. SQLite数据库入门教程

    SQLite数据库入门教程 SQLite 是一个开源的嵌入式关系数据库,实现自包容.零配置.支持事务的SQL数据库引擎. 其特点是高度便携.使用方便.结构紧凑.高效.可靠. 与其他数据库管理系统不同, ...