javascript - JQuery 拉伸(stretch)按钮水平到窗口宽度

Question

我尝试创建一个将其元素拉伸(stretch)到窗口宽度的菜单。有人可以告诉我我做错了什么吗？我知道之前有人问过这个问题，但我只是不知道我的代码有什么问题。

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

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

您还需要在 anchor 上设置display:inline-block 或display:block，这样您就可以影响宽度。

a { display:inline-block; }

Updated Fiddle

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