css - 使最后一个内联列表项扩展容器的剩余宽度

Question

我正在寻找一种方法来使最后一个内联列表项扩展其容器的其余部分。所以我有这样的东西。

<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？

Answer 1

您可以将 display: table(和 table-cell，至少对于 Firefox，table-row)与 一起使用table-layout: fixed 获取表格算法，其中作者(您)指定的宽度由浏览器应用，而不是浏览器尽最大努力使单元格宽度适应其内容的其他方式。< br/> 然后将 50px 的宽度应用到除最后一个之外的所有“单元格”。
我在 ul 上使用了 table-row 并在其 nav 父级上使用了 table 因为在 Fx 18 上设置 display : ul 上的 table 没有预期的效果(与浏览器必须创建缺失部分 a.k.a. shadow 元素作为行 in-之间)。 非常具有描述性(这个元素必须呈现为表格，这个元素必须呈现为一行，这些元素必须呈现为单元格)会有所帮助。

在这里 fiddle :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+ 兼容，而不是我在 fiddle 中所说的 IE8+...

编辑:糟糕，我在上次 li 上没有看到您的 .last 类(class)。好吧，你明白了:)
edit2:使用此类更新 fiddle ，既不 :not() 也不 :last-child 伪