inline list size issue

I am using an inline-block list as a horizontal navigation bar with drop down menus. But I can't seem to get it to fill up the entire width of the screen. To make it more frustraiting, when I change the zoom level of the browser screen, the list resizes at a different rate from everything else. Thus, on some zooms it is too long and wraps to the next line, and on other zoom levels it is too small and doesn't take up the full space. It is doing the same thing in both firefox and ie.

My css file is:

#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;
}

And then my html file is a more complicated version of something like:

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

---

This is kind of tough to call without seeing the whole code and without seeing a live example, but here are my ideas based on the info you've provided:

Try getting rid of the float: left; on #topNavBar, if you want it to fill the whole width, there shouldn't be any reason to float it. Also, try changing #topNavBar to a fixed width in px not by % and i wouldn't set #topNavBar to display: inline-block; just leave it as display: block;.