使最后一个内联列表项扩展容器的剩余宽度 [英] Make the last inline list item extend remaining width of container

问题描述

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

I'm looking for a way to make the last inline list item extend the remainder of its container. So I have something like this.

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

Now the number of list items varies so I can't set the last list item to a set width. I need to make it fill whatever is left over in the width of the nav. How to with using css only?

推荐答案

可以使用 display：table table-cell 和 table-row table-layout：fixed 以获得由浏览器应用指定宽度的表算法，而不是浏览器在其中尽力使单元格的宽度适应他们的内容。

然后对所有单元格应用宽度为50px，除了最后一个。

我使用 table-row 在 nav 上的 ul 和表 18设置 display：table 在 ul 没有预期的效果缺少部分aka 元素作为中间的行）。
非常描述性（这个元素必须呈现为表格，这一个作为一行，这些作为单元格）有帮助。

You can use display: table (and table-cell and, at least for Firefox, table-row) with table-layout: fixed to get the table algorithm where indicated widths by the author (you) are applied by the browser and not the other way where the browser do its best to adapt the width of cells to their content.
Then applying a width of 50px to all "cells" except the last one.
I used table-row on ul and table on its nav parent because on Fx 18 setting display: table on ul didn't have the expected effect (something related to the browser having to create the missing parts a.k.a. a shadow element acting as row in-between). Being very descriptive (this element must be rendered as a table and this one as a row and these ones as cells) helps.

Fiddle here： http://jsfiddle.net/X6UX9/1/

Fiddle here: 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 +正如我在fiddle ...

PS: using :last-child for setting widths is compatible with IE9+, not IE8+ as I stated in the fiddle...

编辑：oops我没有看到你的 .last 上最后 li 上的类。好吧，你得到的想法:)

edit2：更新小提琴使用这个类，既不：not（）也不是：last -child pseudo

edit: oops I didn't see your .last class on last li. Well, you get the idea :)
edit2: updated fiddle using this class and neither :not() nor :last-child pseudo

这篇关于使最后一个内联列表项扩展容器的剩余宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！