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-row上使用了ul，在table父级nav使用display: table，因为在ul上设置<nav> <ul> <li> //width = 50px</li> <li>//width = 50px</li> <li class="last">//width (...) 300px</li> </ul> </nav>的Fx 18没有达到预期的效果（与浏览器相关的东西必须创建缺失的部分，也就是 shadow 元素，作为中间的行）。非常具有描述性（这个元素必须呈现为一个表格，这个元素作为一行，而这些元素作为单元格）有帮助。

在这里小提琴：http://jsfiddle.net/X6UX9/1/

<强> HTML：

* {
    -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;
}

<强> CSS：

:last-child

PS：使用.last设置宽度与IE9 +兼容，而不是我在小提琴中说的IE8 + ...

编辑：oops我上次li没有看到您的:not()课程。好吧，你明白了:) edit2：使用此类更新小提琴，:last-child和{{1}}伪

Answer 2

2019年更新：

ul { 
    display: flex;
}
ul li:last-child {
    flex: 1; 
}

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

2 个答案: