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？

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），你都会遇到一些令人讨厌的问题，包括舍入错误。

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/

然而，它可能不足以跨浏览器。

Answer 3

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

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

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

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>

Answer 5

这是一个工作小提琴：http://jsfiddle.net/vDVvm/7/

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

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

6 个答案: