现有代码
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(不拉伸(stretch)):@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 垫片，如果需要，是可以接受的)。
最佳答案
只有 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+应该支持
关于css - 使水平列表中的最后一个元素拉伸(stretch)到剩余空间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20018895/