找了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. CentOS上安装MySQL

    1.准备RPM安装包 MySQL-server-5.6.33-1.linux_glibc2.5.x86_64 MySQL-client-5.6.33-1.linux_glibc2.5.x86_64 2 ...

  2. Nginx负载均衡SFTP

    1.CentOS安装SFTP,参考 2.Nginx-1.8.1 下载 ,Nginx_TCP插件 下载 3.安装Nginx [root@localhost nginx-1.8.1]# yum -y in ...

  3. 45种Javascript技巧大全(转)

      6.小心使用typeof.instanceof和constructor typeof:不要忘了typeof null返回object,而大多数对象,typeof(Array, Date, and ...

  4. ROW_NUMBER 使用

    WITH t_pageAS( SELECT ROW_NUMBER() OVER ( ORDER BY table_name ) AS row_index,column_name FROM table_ ...

  5. HW7.1

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  6. Bzoj-2005 能量采集 gcd,递推

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2005 题意:题目转换后的模型就是求Σ(gcd(x,y)), 1<=x<=n, ...

  7. 【转】Mybatis Generator最完整配置详解

    本文转简书:http://www.jianshu.com/p/e09d2370b796 --> --> <!-- 自动识别数据库关键字,默认false,如果设置为true,根据Sql ...

  8. TreeView节点

    TreeView由节点构成,建树通过对TreeView.items属性进行操作.Items是一个TTreeNodes对象,这是一个TTreeNode集. 一.针对TTreeNodes,也就是 Tree ...

  9. iOS stretchableImageWithLeftCapWidth 图片放大不变形

    转载自:http://www.cnblogs.com/bandy/archive/2012/04/25/2469369.html - (UIImage *)stretchableImageWithLe ...

  10. HDU 5074 Hatsune Miku（DP)

    Problem Description Hatsune Miku is a popular virtual singer. It is very popular in both Japan and C ...