内联列表大小问题

Question

我使用inline-block list 作为带有下拉菜单的水平导航栏。但我似乎无法让它填满屏幕的整个宽度。更令人沮丧的是，当我更改浏览器屏幕的缩放级别时，列表会以与其他所有内容不同的速度调整大小。因此，在某些缩放中它太长并换行到下一行，而在其他缩放级别上它太小并且不占用全部空间。它在 Firefox 和 ie 中都在做同样的事情。

我的css文件是：

#topNavBar{  
    margin:0px;  
    padding:0px;  
    list-style:none;  
    width:100%;  
    line-height:45px;  
    float:left;  
    clear:both;  
    display:inline-block;  
}  
#topNavBar > li {
    background:#141414 none repeat scroll 0 0;
    cursor:pointer;
    float:left;
    position:relative;
    padding:0px 10px;
    display:inline-block;
}
#topNavBar .tabs {
    text-align:center;
    display:inline-block;
    white-space:nowrap;
}

然后我的 html 文件是一个更复杂的版本，例如：

<ul id="topNavBar">
    <li class="tabs">blah1</li>
    <li class="tabs">blah2</li>
    <li class="tabs">blah3</li>
</ul>

Answer 1

如果没有看到整个代码，也没有看到一个实时示例，这有点难以调用，但根据您提供的信息，这是我的想法：

试着去掉#topNavBar上的float: left;，如果你想让它填满整个宽度，应该没有任何理由float它。另外，尝试将#topNavBar 更改为px 中的固定宽度，而不是%，我不会将#topNavBar 设置为display: inline-block;，只需将其保留为display: block;。