8

我对此感到困惑有一段时间了。这是我现在拥有的：

-------------------------------------------------------------------------------
|                   |                  |                     |
|       Item 1      |      Item 2      |      Last item      |
|                   |                  |                     |
-------------------------------------------------------------------------------

在那里，最后一个 li 只占用了 ul 的一部分。我需要它看起来像这样：

-------------------------------------------------------------------------------
|                   |                  |                                      |
|       Item 1      |      Item 2      |              Last item               |
|                   |                  |                                      |
-------------------------------------------------------------------------------

我不能使用 Javascript（或 Jquery）。我不想设置每个 li 的宽度，因为文本大小可能会有所不同，而且我不知道会有多少 li。我可能有 5 或 3 个。

我将如何做到这一点？谢谢。

这是一个带有我的一些代码的jsfiddle。我需要较浅的颜色来扩展 ul 的其余部分。JSFIDDLE

4

2 回答 2

22

您可以将除最后一个元素之外的所有元素浮动到左侧。

最后一个元素的盒子模型将在这些浮动列表项后面扩展（即使内容没有）。overflow:hidden将阻止这种行为；盒子模型将在最后一个浮动项目结束时开始，就好像浮动项目仍在页面的自然流动中一样。

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 的编辑：

JSFiddle

于 2013-09-26T12:13:13.047 回答
1 
ul>li:last-of-type {width:whatever}

所以最后一个之前的两个 li 会浮动：left 并且两者都有 20%，最后一个可以有 60%；

也不要忘记用

ul {overflow:auto;}

并保持 % 完美，这样边界就不会逃脱：

ul>li {box-sizing:border-box;}
于 2013-09-26T12:12:28.243 回答