html - 内联列表大小问题

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