我正在寻找一种方法来使最后的内联列表项扩展其容器的其余部分.所以我有这样的事情.
<nav>
<ul>
<li></li> //width = 50px
<li></li> //width = 50px
<li class="last"></li> //width needs to fill the remaining 300px
</ul>
</nav>
nav {
width:400px;
height:50px;
}
nav > ul > li {
display:inline-block;
padding:5px;
}
现在列表项的数量不同,所以我不能将最后一个列表项设置为设置的宽度.我需要让它填充导航宽度中留下的任何东西.如何只使用css？
解决方法
你可以使用display：table(和table-cell,至少对于Firefox,table-row)和table-layout：fixed来获取表算法,其中作者(你)指定的宽度由浏览器应用而不是浏览器尽力使细胞宽度适应其内容的另一种方式.
然后对除最后一个之外的所有“单元格”应用50px的宽度.
我在其导航父级上使用了ul和table上的表行,因为在Fx 18上设置显示：ul上的表没有预期的效果(与浏览器必须创建缺失部分相关的内容,也就是影响行的阴影元素) -之间).
非常具有描述性(这个元素必须呈现为一个表格,这个元素作为一行,而这些元素作为单元格)有所帮助.
然后对除最后一个之外的所有“单元格”应用50px的宽度.
我在其导航父级上使用了ul和table上的表行,因为在Fx 18上设置显示：ul上的表没有预期的效果(与浏览器必须创建缺失部分相关的内容,也就是影响行的阴影元素) -之间).
非常具有描述性(这个元素必须呈现为一个表格,这个元素作为一行,而这些元素作为单元格)有所帮助.
小提琴：http://jsfiddle.net/X6UX9/1/
HTML：
<nav>
<ul>
<li> //width = 50px</li>
<li>//width = 50px</li>
<li class="last">//width (...) 300px</li>
</ul>
</nav>
CSS：
* {
-webkit-Box-sizing: border-Box;
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
}
nav {
display: table;
table-layout: fixed;
width:400px;
height:50px;
}
nav > ul {
display: table-row;
}
nav li {
display: table-cell;
padding:5px;
outline: 1px dashed blue;
}
nav li:not(:last-child) {
width: 50px;
}
PS：使用：设置宽度的last-child与IE9兼容,而不是我在小提琴中所说的IE8 …
编辑：oops我没有在最后一个li上看到你的.last类.反正你懂这个意思 ：)edit2：使用这个类而不是更新小提琴：not()nor：last-child pseudo
