html - 做最后在列表跨度剩余容器宽度？

Question

我<li>在无序列表中有几个元素。除了最后一个之外，所有的<li>都有一个 JS/动态分配的宽度。我希望最终<li>宽度占据剩余空间，完全填满整个窗口宽度。

这个 JSfiddle除了最后<li class="three">占用窗口的剩余宽度外，什么都有。我如何实现这一目标？浏览器兼容性（旧版 IE 等）在这里不是问题，但我想以纯 CSS 解决方案为目标。

Answer 1

有不同的方法可以实现你想要的。这是一个使用 jQuery 的简单建议。

$(function () {
    var width = parseInt($(document).width()) - parseInt($('li').width()) -
                parseInt($('li:first').width());
    $("li:last").css("width",width);
});

演示小提琴。

Answer 2

您可以通过以 % 为每个 li 指定宽度来实现

<ul>
<li class="one" style="width:25%">One</li>
<li class="two" style="width:25%">Two</li>
<li class="three" style="width:50%">Three</li>
</ul>