将列表项的宽度设置为填充无序列表

Question

我有一个水平的无序列表，它有固定的宽度。里面有动态数量的列表项。它可能是2个项目或6个项目-这取决于几个因素。

我想能够设置每个列表项的宽度，以便它们填充ul的整个宽度，无论内部有多少项目。因此，如果有1个列表项，它的宽度将为100％；2个列表项，它们都将为50％，依此类推。

以下是我的HTML和CSS：

ul
{
    width: 300px;
    height: 50px;
    background-color: #000000;
    list-style: none;
    margin: 0;
    padding: 0;
}

li
{
    float: left;
    height: 50px;
    background-color: #4265CE;
    margin: 0;
    padding: 0;
}

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

这是jFiddle的演示链接：http://jsfiddle.net/vDVvm/3/

有没有用CSS实现这个效果的方法，还是我必须使用jQuery？

- Steven

Answer 1

很抱歉，纯CSS无法实现。编辑：我能想到的最合适的jQuery解决方案是：http://jsfiddle.net/vDVvm/8/。

(function( $ ){
  $.fn.autowidth = function() {
    return this.each(function() {        
        $('li', this).css({'width' : (100 / $('li', this).length) + '%'})
    });
  };
})( jQuery );

$(document).ready(function(){
    $('.fill-me').autowidth();    
});

请记住，无论何时（100％number_of_lis！== 0），您都会遇到一些令人讨厌的舍入误差问题。

- vzwick

---

嗯...你的更好...我会这样写我的版本：$("ul li").css({width:(100/$("ul li").length)+"%"}); - Joseph Marikle

Answer 2

一种不需要JavaScript的解决方案。

ul
{
    width: 300px;
    height: 50px;
    background-color: #000000;
    list-style: none;
    margin: 0;
    padding: 0;
    display: table;
}

li
{
    height: 50px;
    background-color: #4265CE;
    margin: 0;
    padding: 0;
    display: table-cell;
}

http://jsfiddle.net/vDVvm/5/

这可能不够跨浏览器兼容。

- Michas

---

呃，不幸的是，display:table-cell经常导致意外的结果。并非跨浏览器。 - vzwick

此外，请参见（虽然是非常假设的）这里的场景：http://jsfiddle.net/vDVvm/9/ - <ul> 在某些时候停止关心其宽度，以适应所有<li>及其文本。 - vzwick

如果有太多的项目，没有办法将它们放入一个固定大小的框中而不需要滚动条。JavaScript、Java、Flash或任何其他语言都无法解决这个问题。 - Michas

Answer 3

这也可以只使用css实现，但只能在现代浏览器中使用。

ul {
    /* ... */
    display: table;
}

li {
    /* ... */
    display: table-cell;
}

- Niko

Answer 4

使用 jQuery，您可以像这样做：

var li = $('#mylist li').size();
var liWidth = 100 / li;

$('#mylist li').width(liWidth + '%');

假设你的HTML长这样：

<ul id="mylist">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

- Soufiane Hassou

---

不幸的是，它使用页面上的每个 li 来计算宽度... - vzwick

Answer 5

下面是一个有效的实例： http://jsfiddle.net/vDVvm/7/

- Jack

Answer 6

这是对vzwick函数的改进：

(function( $ ){
  $.fn.autowidth = function() {
    return this.each(function() {
        var w = $(this).width();
        var liw = w / $(this).children('li').length;
        $(this).children('li').each(function(){
            var s = $(this).outerWidth(true)-$(this).width();
            $(this).width(liw-s);
        });
    });
  };
})( jQuery );

- David B