Html 内联列表大小问题

我使用内联块列表作为带有下拉菜单的水平导航栏。但我似乎无法让它填满整个屏幕的宽度。为了使其更为简洁，当我更改浏览器屏幕的缩放级别时，列表的大小将以不同于其他内容的速率调整。因此，在某些缩放中，它太长，会换行到下一行，而在其他缩放级别中，它太小，不会占用全部空间。它在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>

---

如果不看完整的代码，也不看一个真实的例子，这是很难调用的，但以下是我根据您提供的信息提出的想法：

---

尝试摆脱浮动：左；在topNavBar上，如果希望它填充整个宽度，则不应该有任何理由使其浮动。另外，尝试将topNavBar更改为px中的固定宽度而不是%并且我不会将topNavBar设置为显示：inline block；只需将其保留为display:block

你好，杰克，你有没有任何实例来检验它？谢谢大家的回答。对不起，我花了这么长时间才回来，生活中出现了一些疯狂的事情。好的，可以在verbs.colorado.edu/devpages/index.php中找到实时示例