Javascript JQuery将按钮水平拉伸到窗口宽度

我尝试创建一个菜单，将其项目扩展到窗口宽度。有人能告诉我我做错了什么吗？我知道以前有人问过这个问题，但我不知道我的代码出了什么问题

这就是我想要实现的。红色是窗户

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

html

提前感谢。

使用$（“#menu”）。长度您将获得#menu元素的出现次数--1。您应该使用以下方法获得菜单项的数量

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

使用$（“#menu”）.length，您将获得#menu元素的出现次数--1。您应该使用以下方法获得菜单项的数量

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

---

jQuery代码中有几个错误。您需要使用

width（）

而不是

width

，因为这是一个函数调用。此外，在分配

count

时，您没有选择菜单项，您只选择了

菜单

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

您还需要在锚点上设置
display:inline block
或
display:block
，以便影响
宽度

a { display:inline-block; }


注意：您还需要考虑菜单项上的填充等，以获得正确的结果。
您的jQuery代码中有几个错误。您需要使用
width（）
而不是
宽度
，因为这是一个函数调用。此外，在分配
计数
时，您没有选择菜单项，您只选择了
#菜单

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

您还需要在锚点上设置
display:inline block
或
display:block
，以便影响
宽度

a { display:inline-block; }


注意：您还需要考虑菜单项上的填充等，以获得正确的结果。
这可以通过纯CSS完成：


此方法需要知道有多少列表项。
这可以通过纯CSS完成：


此方法需要知道列表项的数量。
应用此更改时，我看不到任何差异。不过，感谢您的评论。应用此更改时，我看不到任何差异。不过，感谢您的评论。为什么要使用jQuery进行此操作？您可以使用纯CSS进行此操作。@cimmanon如何使用纯CSS实现此目的？我试过了，但没有得到想要的结果。你为什么要使用jQuery？你可以用纯CSS来做。@cimmanon我如何用纯CSS来实现这一点？我试过了，但没有得到想要的结果。谢谢你的回答Derek，但这并没有改变我的结果。不过，我对指针很满意。我将我的答案更新为包括我第一次忘记的css。我看到项目现在正在扩展。非常感谢！现在我需要包括我的填充。谢谢你的回答Derek，但这不会改变我的结果。我对指针非常满意。我更新了我的回答，以包括我第一次忘记的css。我看到项目现在正在扩展。非常感谢！现在我需要添加我的填充。感谢您显示此选项！我希望我可以接受这两个答案，但我不能。我对您的答案进行了投票，希望其他人也认为此答案是有益的！我想指出，在您将“位置”属性更改为“绝对”或“相对”之前，此方法效果良好（它会更改“显示”属性）。我还没有弄清楚如何将此菜单粘贴到页面的底部或顶部。感谢您显示此备选方案！我希望我可以接受两个答案，但我不能。我对您的答案进行了投票，希望其他人也能看到此答案。我想指出，在您将“位置”属性更改为“绝对”之前，此方法效果良好ute或relative（它会更改显示属性）。我还没有弄清楚如何将此菜单粘贴到页面的底部或顶部。