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

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获取表格算法，其中作者（您）指示的宽度由浏览器应用，而不是浏览器尽力适应单元格宽度的其他方式到他们的内容。
然后将 50px 的宽度应用于除最后一个之外的所有“单元格”。
我在其父级上使用了table-rowonul和tableon nav，因为在 Fx 18 上设置display: tableonul没有达到预期的效果（与浏览器必须创建缺失的部分（即充当中间行的阴影元素有关））。非常具有描述性（这个元素必须呈现为表格，这个元素必须呈现为一行，这些元素必须呈现为单元格）会有所帮助。

在这里小提琴： 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+，正如我在小提琴中所述...

.last编辑：哎呀我上次没看到你的课li。好吧，你明白了:)
edit2：使用这个类更新了小提琴，既不是伪的:not()也不是:last-child