将最后一个li扩展到ul的剩余宽度? [英] Extend last li to remaining width of a ul?
问题描述
我已经困惑了一段时间了。这里是我现在:
I have been puzzled about this for a while now. Here is what i have now:
-------------------------------------------------------------------------------
| | | |
| Item 1 | Item 2 | Last item |
| | | |
-------------------------------------------------------------------------------
在这里,最后一个li只占用ul的一部分。我需要它看起来像这样:
There, the last li is only taking up part of the ul. I need it to look like this:
-------------------------------------------------------------------------------
| | | |
| Item 1 | Item 2 | Last item |
| | | |
-------------------------------------------------------------------------------
我不能使用Javascript(或Jquery)。
我不想设置每个li的宽度,因为文本大小可以变化,我不知道将有多少li。我可能有5或3。'
I can not use Javascript (or Jquery). I do not want to set the width of each li, since the text size could vary, and i do not know how many li's there will be. I might have 5 or 3.'
我该如何做到这一点?谢谢。
How would i accomplish this? Thanks.
这里是一些jsfiddle我的一些代码。我需要更浅的颜色来扩展ul的其余部分。 JSFIDDLE
Here is a jsfiddle with some of my code. I need the lighter color to expand the rest of the ul. JSFIDDLE
推荐答案
最后一个元素的框模型会扩展到这些浮动的列表项后面(即使内容没有) 。 overflow:hidden
将阻止此行为;
The last element's box model will then extend behind these floated list items (even though the content doesn't). overflow:hidden
will prevent this behaviour; the box model will begin when the last floated item ends, as if the floated items were still in the natural flow of the page.
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:
An edit of your newly added JSFiddle:
这篇关于将最后一个li扩展到ul的剩余宽度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!