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

如果没有看到整个代码并且没有看到实际示例，这很难打电话，但这里有我基于您提供的信息的想法：

尝试删除float: left;上的#topNavBar，如果您希望它填满整个宽度，则float不应该有任何理由。另外，请尝试将#topNavBar更改为px中的固定宽度，而不是%，我不会将#topNavBar设置为display: inline-block;，只需将其保留为{{1} }}

内联列表大小问题

1 个答案: