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

Updated Fiddle

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

Answer 2

以$（“＃菜单”），你得到#menu元素出现的号码长度 - 1.你应该使用下面的方法得到的菜单项的数量

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

Answer 3

这可以用纯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; 
} 

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