jQuery拉伸按钮水平到窗口宽度

Question

我尝试创建一个菜单，将该菜单项拉长到窗口宽度。 有人可以告诉我我在做什么错吗？ 我知道已经问过这个问题了，但是我不知道我的代码有什么问题。

这就是我要实现的目标。红色是窗口

http://jsfiddle.net/JdGeQ/5/

使用Javascript

$(function(){
    $(window).resize(function (e) {
        setTimeout(function () {
            resizeButtons();
        }, 200);
    });
    resizeButtons();
});

function resizeButtons() {
    var count = $("#menu").length;
    var itemwidth = $(window).width / count;  

    $(".item").css("background", "blue");
    $(".item").css("width", itemwidth);
}

CSS

.elementtop {
    position: fixed;
    top: 0;
}
.elementfooter {
    position: fixed;
    bottom: 0;
}
.elementright {
    right: 0;
}
ul {
    min-width:100%;
    padding:0;
    margin:0;
    float:left;
    list-style-type:none;
    background: #000000;
}
li {
    display:inline;
}
a {
    overflow: hidden;
    text-decoration:none;
    color:white;
    background-color:purple;
    padding:0.2em 0.6em;
    border-right:1px solid white;
}

HTML

<div>
    <ul id="menu">
        <li>    <a href="#" class="item">
                <span>Text text</span>
            </a>

        </li>
        <li>    <a href="#" class="item">
                <span>Text2</span>
            </a>

        </li>
        <li>    <a href="#" class="item">
                <span>Text3</span>
            </a>

        </li>
    </ul>
</div>

提前致谢。

Answer 1

您的jQuery代码中有几个错误。 您需要使用width()而不是width ，因为它是一个函数调用。 同样，在分配count时，您没有选择菜单项，而只是选择#menu 。

function resizeButtons() {
    var count = $("#menu .item").length;
    var itemwidth = $(window).width();
    itemwidth = itemwidth / count;  
    $(".item").css(
       "width", itemwidth  
    );
}

您还需要在锚点上设置display:inline-block或display:block ，以便可以影响width 。

a { display:inline-block; }

更新小提琴

注意：您还需要考虑菜单项上的填充等，以获得正确的结果。

Answer 2

这可以通过纯CSS完成：

http://cssdeck.com/labs/hgmvgwqc

ul {
    min-width:100%;
    padding:0;
    margin:0;
    display: table;
    list-style-type:none;
    background: #000000;
}
li {
    display: table-cell;
    width: 33%;
}
a {
    overflow: hidden;
    text-decoration:none;
    color:white;
    background-color:purple;
    padding:0.2em 0.6em;
    border-right:1px solid white;
    display: block;
}

此方法需要知道有多少个列表项。

Answer 3

使用$（“＃menu”）。length，您可以获取#menu元素的出现次数-1.您应使用以下命令获取菜单项的数量

var count = $("#menu li").length;