【问题标题】：Make last element in horizontal list stretch to remaining space?使水平列表中的最后一个元素伸展到剩余空间？
【发布时间】：2013-11-29 21:32:52
【问题描述】：

现有代码

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 shim）。

【问题讨论】：

标签： css layout compass-sass

【解决方案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+应该支持

【讨论】：

谢谢！最后一个li 占用剩余空间，input 设置相对于环绕块元素的宽度，即li。
如果您可以将小提琴中的 HTML 添加到您的答案中，那就太好了。否则，我注意到，它是不完整的。
看不到重点，因为它仅与一个类不同，可以添加为静态或动态（使用 js），但这不是问题的重点......但它已添加...
谢谢！人们复制和粘贴代码。 Answering guidelines 指出“目标站点[可能] 无法访问或[进入] 永久离线”。

【解决方案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 定位最后一个孩子。

【讨论】：