Question

我希望我的导航菜单li项目在浏览器大小上水平划分。我尝试过其他问题的多种解决方案，但它们无法正常工作：（

一个例子是http://jsfiddle.net/timshutes/eCPSh/416/。但是我想要一个990px的最小宽度，我已经设置了

你能帮忙吗？这是我的代码

<div id="pageTop"> 
    <nav>
        <ul>
            <li><a href=""><img src="images/headerConSize.png" alt="" />Home</a>
            <li><a href=""><img src="images/headerConSize.png" alt="" />Home</a>
            <li><a href=""><img src="images/headerConSize.png" alt="" />Home</a>
            <li><a href=""><img src="images/headerConSize.png" alt="" />Home</a>            
            <li><a href=""><img src="images/headerConSize.png" alt="" />Home</a>
            <li><a href=""><img src="images/headerConSize.png" alt="" />Home</a>
            <li><a href=""><img src="images/headerConSize.png" alt="" />Home</a>
            <li><a href=""><img src="images/headerConSize.png" alt="" />Home</a>
            <li><a href=""><img src="images/headerConSize.png" alt="" />Home</a>        
        </ul>
    </nav>
</div>


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

nav {
  background-color: #fff;
  border: 0px solid #dedede;
  border-radius: 10px; /* edges */
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
  color: black;
  display: block;
  margin: 0px auto;
  overflow: hidden;
  min-width: 990px;
  height: 100px;
}

nav ul {
    display       : inline-block;
    border-radius : 10px;
    overflow      : hidden;
    padding       : 0; 
    margin        : 0;
}

nav ul li {
    display         : inline-block;
    list-style-type : none;
}

nav a {
    display          : block;
    line-height      : 56px;
    padding-top      : 24px;
    text-decoration  : none;  
    color            : #676767;
    font-size        : 12pt;
    background-color : #c5c5c5;
    width            : 110px;
    text-align       : center;
}

nav img {
    display : block;
    margin  : 0 auto;
    margin-top: -15px;
}


nav > ul > li:hover > div {
    display: block;
    opacity: 1;
    visibility: visible;
}

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

Answer 1

试试这个

在#nav li中取代

  width:auto;

// width：16.666666667％;

Answer 2

float:left和nav ul li需要一些css属性，例如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 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();
});

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

4 个答案: