我一直对这个问题感到困惑。这是我现在拥有的:
-------------------------------------------------------------------------------
| | | |
| Item 1 | Item 2 | Last item |
| | | |
-------------------------------------------------------------------------------
那里,最后一个li只占了ul的一部分。我需要它看起来像这样:
-------------------------------------------------------------------------------
| | | |
| Item 1 | Item 2 | Last item |
| | | |
-------------------------------------------------------------------------------
我不能使用 Javascript(或 Jquery)。 我不想设置每个里的宽度,因为文本大小可能会有所不同,而且我不知道会有多少里。我可能有 5 或 3 个。”
我将如何做到这一点?谢谢。
这是一个包含我的一些代码的 jsfiddle。我需要较浅的颜色来扩展 ul 的其余部分。 JSFIDDLE
最佳答案
您可以将除最后一个元素之外的所有元素 float 到左侧。
最后一个元素的框模型将扩展到这些 float 列表项的后面(即使内容没有)。 overflow:hidden
将阻止这种行为;框模型将在最后一个 float 元素结束时开始,就好像 float 元素仍在页面的自然流动中一样。
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 的编辑:
关于html - 将最后一个 li 扩展到 ul 的剩余宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19027764/