使用CSS使<li>适合<ul>的宽度

Question

我试图使<li>适合的宽度,<ul>但即使width:auto它根本不起作用,我不知道为什么.我尝试使用,display:inline-block但这是一样的.我不知道我会有多少个标签,所以这就是我没有直接使用百分比的原因.

我想在桌面上显示页面时显示内联列表,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(../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;
}

Answer 1

我已经找到了这种处理单行全宽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及以下版本,你应该使用一些内联块hackery :)

的jsfiddle

Answer 2

<ul>如果您想用 5 个s填充 的宽度<li>，则必须为<li>每个 s 指定 20% 的宽度。
请注意，如果您想使其正常工作，则需要更改 CSS 的一些其他细节；例如，使用 a 时，display:inline-block您可以在计数之间添加空格<li>，因此内容的总宽度<ul>将超过 100% 宽。我建议删除display:inline-block并给他们float:left。

编辑：或者你希望它们根据内容按比例分配？那将是一个不同的挑战。