现有代码

Question

现有代码

index.html：

<!DOCTYPE html>
<head>
  <title>Test</title>
  <link href="stylesheets/index.css" rel="stylesheet"
        type="text/css" />
</head>
<ul>
  <li>Foo</li>
  <li>Bar</li>
  <li><input /></li>
</ul>

index.scss（不拉伸）：

@import "compass/reset";
@import "compass/typography/lists/horizontal-list";

body {
  background: darkgray;
}

ul {
  width: 100%;
  background: lightgray;
  @include horizontal-list;
}

问题

使最后一个元素占用剩余元素的优雅方法是什么水平空间？

详细说明：

请参阅下图，了解所需的输出。
HTML代码的修改是可以的，只要它在语义上保持清晰。
该解决方案应该适用于最新的Firefox，最新的Chrome和在IE8-11中（如果需要，可以使用JavaScript填充程序）。

Desired output

Answer 1

这个只有css的解决方案。

HTML：

<ul>
  <li>Foo</li>
  <li>Bar</li>
  <li class="last"><input type="text" /></li>
</ul>

CSS：

ul li { float: left; list-style: none; }
ul li.last { float: none; display: block; overflow: hidden; }
ul li input { width: 100%; border: 0; box-shadow: inset 0 0 1px #000; }

演示：

* { margin: 0; padding: 0; }
ul li { float: left; list-style: none; }
ul li.last { float: none; display: block; overflow: hidden; }
ul li input { width: 100%; border: 0; box-shadow: inset 0 0 1px #000; }

<ul>
  <li>Foo</li>
  <li>Bar</li>
    <li class="last"><input type="text" /></li>
</ul>

（Also on jsFiddle）

它应该得到IE7 +

的支持

Answer 2

您可以使用display:table-cell（caniuse）：

ul {
    width: 100%;
    background: lightgray;
}

li{
    display:table-cell;
}

ul>li:last-child, ul>li:last-child>input{
    width:100%;
}

ul>li:last-child>input{
    margin:0;
    border:0;
    background:red;
}

JSFiddle

但是，:last-child不是IE8中的支持者，因此您需要使用JavaScript或like this定位最后一个孩子。

使水平列表中的最后一个元素延伸到剩余空间？

现有代码

问题

2 个答案: