Question

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

This 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);
});

演示Fiddle。

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>

列表中的最终<li>是否为剩余容器宽度？</li>

2 个答案: