5

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

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

4

2 回答 2

4

您可以使用display: table（并且table-cell，至少对于 Firefox，table-row）table-layout: fixed来获取表格算法，其中作者（您）指示的宽度由浏览器应用，而不是浏览器尽力调整单元格宽度的其他方式到他们的内容。
然后将 50px 的宽度应用于除最后一个以外的所有“单元格”。
我在其父级上使用table-row了 onul和tableon ，nav因为在 Fx 18display: table上设置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+，正如我在小提琴中所述...

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

于 2013-02-06T20:32:32.637 回答
2

2019 年更新：

ul { 
    display: flex;
}
ul li:last-child {
    flex: 1; 
}
于 2019-05-29T05:21:04.200 回答