根据浏览器的导航菜单自动宽度更改

Question

我想要我的导航菜单我想要我的导航菜单我想要我的导航菜单我想要我的导航菜单我想要我的导航菜单我想要我的导航菜单我想要我的导航菜单

<div id="pageTop"> 
    <nav>


nav > ul > li > div ul > li {
    display: block;
}

Answer 1

您需要一些css属性，例如float:left和nav ul li的padding。我通过以下代码设置了您的导航，请访问link

#pageTop {
    height: 172px;
    border: 1px red dashed;
}

 nav ul li {
        height: 50px;
        width: 10.666666667%;
        text-align: center;
        background: #ddd;
        border-right: 1px solid #fff;
        float:left;
        padding:10px 0px;
        list-style:none;
    }

Answer 2

尝试一下

在#nav li中替换

  width:auto;

//宽度：16.666666667％；

Answer 3

松开所有CSS，然后尝试

nav{
    display:table;
}

li{

display:table-cell;
}

Answer 4

我使用了一些jquery来查找屏幕的宽度，然后将宽度除以菜单栏中的链接数。.此解决方案应适用于所有浏览器和浏览器大小。签出更新的小提琴http://jsfiddle.net/eCPSh/721/，希望对您有所帮助。

jQuery

var width = $('#nav').width();
var size = (function(){
if(width > 990){    
$('#nav li').css("width",width/6 - 5);
} else {    
$('#nav li').css("width","160");
}
});
size();
$(window).resize(function(){
size();
});