找了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. 利用weka和clementine数据挖掘举例

    1.数据概述 本报告中采用的数据集来自于UCI经典数据集Adult,最初来源是由1994年Barry Becker的统计数据集,该数据集本来最初的主要任务是根据数据集中的相关属性预测某个人的年收入是大 ...

  2. Express细节探究(1)——app.use(express.static)

    express相信是很多人用nodejs搭建服务器的首选框架,相关教程有很多,也教会了大家来如何使用.如果你想更深的了解他的细节,不妨和我一起来研究一下. 先来看一个每个人都用到的方法app.use( ...

  3. 自己安装的几个Eclipse插件

    http://eclipsenotepad.sourceforge.net This plugin has the simple objective to let developers write s ...

  4. 【转载】socket的半包，粘包与分包的问题

    http://zhaohuiopensource.iteye.com/blog/1541270 首先看两个概念: 短连接: 连接->传输数据->关闭连接    HTTP是无状态的,浏览器和 ...

  5. 【转载】extern "C"的用法解析（原博主就是抄百度百科的，不如另外一篇好）

    [说明]文章转载自Rollen Holt 的文章 http://www.cnblogs.com/rollenholt/archive/2012/03/20/2409046.html --------- ...

  6. CodeForces 696A（Lorenzo Von Matterhorn ） & CodeForces 696B（Puzzles ）

    A,给一棵完全二叉树,第一个操作,给两个点,两点路径上的所有边权值都增加w,第二个操作,给两个点,求两点路径上的所有边权值和. 我看一眼题就觉得是树链剖分,而我又不会树链剖分,扔掉. 后来查了题解,首 ...

  7. android 数据存储操作之SQLite

    一. SQLite介绍 SQLite是android内置的一个很小的关系型数据库. 二. SQLiteOpenHelper的使用方法 ①SQLiteOpenHelper是一个辅助类来管理数据库的创建和 ...

  8. Android Handler的简单使用

    大家好我们这一节讲的是Android Handler的使用,在讲Handler之前,我们先提个小问题,就是如何让程序5秒钟更新一下Title. 首先我们看一下习惯了Java编程的人,在不知道Handl ...

  9. C#操作sql通用类 SQLHelper

    Codeusing System; using System.Data; using System.Configuration; using System.Web; using System.Web. ...

  10. JavaScript要点 （五） 函数定义

    JavaScript 使用关键字 function 定义函数. 函数可以通过声明定义,也可以是一个表达式. 函数声明分号是用来分隔可执行JavaScript语句. 由于函数声明不是一个可执行语句,所以 ...