我尝试创建一个将其元素拉伸(stretch)到窗口宽度的菜单。有人可以告诉我我做错了什么吗?我知道之前有人问过这个问题,但我只是不知道我的代码有什么问题。
这就是我要实现的目标。红色是窗口
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>
提前致谢。
最佳答案
您的 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; }
注意:您还需要考虑菜单项上的填充等,以获得正确的结果。
关于javascript - JQuery 拉伸(stretch)按钮水平到窗口宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16819192/