让<li>使用CSS来匹配<ul>的宽度
我试图使<li>适合<ul>的宽度，但即使width:auto它根本不工作，我不知道为什么。 我试图使用display:inline-block但是这是一样的。 我不知道我会有多less个标签，所以这就是为什么我不直接使用百分比。
我想在桌面上显示页面时显示内联列表，并且当我在智能手机上时（使用媒体查询），每行显示一个li 。
我有这个：
<ul id='menu'> <li class="button"><a class='current' href='http://'>Home</a></li> <li class="button"><a href='http://'>Products</a></li> <li class="button"><a href='http://'>Support</a></li> <li class="button"><a href='http://'>Contact</a></li> <li class="button"><a href='http://'>Contact</a></li> </ul>
和我的CSS看起来像这样：
ul#menu { margin:0; padding:0; list-style-type:none; width:100%; position:relative; display:block; height:30px; font-size:12px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; /*border-bottom:1px solid #000000; border-top:1px solid #000000;*/ } li.button { background:transparent url(..http://img.dovov.comnav_bg.png) repeat-x top left; height:30px; width:auto; } ul#menu li { display:inline-block; margin:0; padding:0; width:auto; } ul#menu li a { display:inline-block; color:#999999; text-decoration:none; font-weight:bold; padding:8px 20px 0 20px; width:auto; } ul#menu li a:hover { color:#FFFFFF; height:22px; background:transparent url(..http://img.dovov.comnav_bg.png) 0px -30px no-repeat; } ul#menu li a.current { display:inline-block; height:22px; background:transparent url(images/nav_bg.png) 0px -30px no-repeat; margin:0; }
我已经find了这种方法来处理单行全宽ul，其中一个未定义数量的李元素需要均匀地分开：
ul { width: 100%; display: table; table-layout: fixed; /* optional */ } ul li { display: table-cell; width: auto; text-align: center; }
基本上，它模仿一张桌子。 在Gecko，Webkit，IE8 +中工作。 对于IE7和向下，你应该使用一些内联块hackery 🙂
的jsfiddle
由于李计数可以改变，我只能想到用javascript / jquery完成你的build议。 只要用李的数字除以100，并在每一个上设置宽度。
var width = Math.floor(100 / $("ul#menu li").size()); $("ul#menu li").css('width', width + "%");
你可能需要根据填充宽度来玩什么，而不是。
作为一个侧面说明，如果你还没有，我build议得到一个像萤火虫的工具，它可以让你编辑css和执行js在飞行中。 微调外观是非常有用的。
如果要用<li>来填充<ul>的宽度，则必须给每个<li>宽度设置20％。
请注意，如果你想使这个工作，你需要改变一些CSS的其他细节; 例如，使用display:inline-block您可以在<li> count之间创build空格，因此<ul>内容的总宽度将超过100％。 我build议删除display:inline-block并给他们float:left 。
编辑：或者你想让他们根据他们的内容按比例分配？ 这将是一个不同的挑战。
<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> body{ margin:0 auto; } .main{ width:650px; border:1px solid red; padding:5px; } ul { padding:0; margin:0; width: 100%; border-bottom: 0; } li{ display: table-cell; width: 1%; float: none; border:1px solid green; margin:2px; padding:10px; text-align:center; } </style> </head> <body> <div class="main"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </div> </body> </html>
尝试下面的CSS：
style.css (line 87) ul#menu li { float: left; margin: 0; padding: 6px 0; width: 11.1%; } style.css (line 113) ul#menu li a.current { background: url("images/nav_bg.png") no-repeat scroll 0 -30px transparent; height: 22px; margin: 0; } style.css (line 95) ul#menu li a { color: #999999; font-weight: bold; padding: 8px 20px 0; text-decoration: none; width: auto; }
看屏幕截图：
