我有一段时间对此感到困惑.这是我现在拥有的：
------------------------------------------------------------------------------- | | | | | Item 1 | Item 2 | Last item | | | | | -------------------------------------------------------------------------------
在那里,最后一个li只占用ul的一部分.我需要它看起来像这样：
------------------------------------------------------------------------------- | | | | | Item 1 | Item 2 | Last item | | | | | -------------------------------------------------------------------------------
我不能使用Javascript(或Jquery).
我不想设置每个li的宽度,因为文本大小可能会有所不同,我不知道会有多少li.我可能有5或3′
我怎么做到这一点？谢谢.
解决方法
您可以浮动所有元素,但最后一个向左浮动.
然后,最后一个元素的盒子模型将扩展到这些浮动列表项后面(即使内容没有).溢出：隐藏会阻止这种行为;当最后一个浮动项目结束时,盒子模型将开始,就像浮动的项目仍然在页面的自然流程中一样.
ul,li{
margin:0;
padding:0;
list-style-type:none;
}
ul li{
display: block;
float:left;
}
ul li:last-child{
background-color: #ddd;
float:none;
overflow:hidden;
}
<ul>
<li>Item</li>
<li>Item</li>
<li>I will extend to the end of the page.. No matter how far. I will also not drop beneath my prevIoUs items,even if the text in here requires me to span over multiple lines.</li>
</ul>
编辑新添加的JSFiddle：
