我想让< li>适合< ul>的宽度。但是即使有width：auto它根本不工作，我不知道为什么。我试图使用display：inline-block但是这是一样的。我不知道我将有多少选项卡，所以这就是为什么我不直接使用百分比。
我希望在我在桌面上显示页面时显示列表，并且当我在智能手机上(使用媒体查询)时，显示一行一行。
我有这个：
<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(../images/nav_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(../images/nav_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;
}
解决方法
我发现这种方式来处理单行全宽ul，其中未定义数量的li元素需要均匀间隔：
ul {
width: 100%;
display: table;
table-layout: fixed; /* optional */
}
ul li {
display: table-cell;
width: auto;
text-align: center;
}
基本上，它模拟表。在Gecko，Webkit，IE8工作。
对于IE7和向下，你应该使用一些inline-block hackery 原文链接：https://www.f2er.com/css/221457.html
