Question

我一直对此感到困惑。这就是我现在所拥有的：

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

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

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

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

我将如何实现这一目标？感谢。

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

Answer 1

你可以浮动所有元素，但最后一个是左边的。

最后一个元素的盒子模型将延伸到这些浮动列表项后面（即使内容没有）。 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

Answer 2

ul>li:last-of-type {width:whatever}

所以在最后一个之前的两个li会漂浮：左边和两个都有20％，最后一个可以有60％;

也不要忘记用

清除这些错误

ul {overflow:auto;}

并保持％完美，以便边框不会逃脱：

ul>li {box-sizing:border-box;}

将最后一个li延伸到ul的剩余宽度？

2 个答案: