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

【问题标题】：Set width of list items to fill unordered list设置列表项的宽度以填充无序列表
【发布时间】：2011-09-23 19:24:07
【问题描述】：

所以我有一个设置宽度的水平无序列表。在里面，我有一个动态数量的列表项。它可能是 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？

【问题讨论】：

标签： jquery html css

【解决方案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)，您都会遇到一些令人讨厌的舍入错误问题。

【讨论】：

meh...你的更好...我的版本是这样的：$("ul li").css({width:(100/$("ul li").length)+"%"});

【解决方案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/

但是，跨浏览器可能还不够。

【讨论】：

嗯。不幸的是， display:table-cell 经常会导致意想不到的结果。确实不是跨浏览器。
另外，请参见（非常假设的，诚然）场景：jsfiddle.net/vDVvm/9 - <ul>在某些时候停止关心它的宽度，以适应所有 <li>s 包括他们的文本。
如果项目太多，没有滚动条的固定框是没有办法的。 JavaScript、Java、Flash 或其他任何东西都无济于事。

【解决方案3】：

这也可以仅使用 css，但仅适用于现代浏览器。

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

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

【讨论】：

【解决方案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>

【讨论】：

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

【解决方案5】：

这是一个有效的小提琴：http://jsfiddle.net/vDVvm/7/

【讨论】：

【解决方案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 );

【讨论】：