如何防止包装内嵌列表

Question

我正试图在页面包装器上有一个100%拉伸的导航菜单.在我的5个列表项的测试中,我有以下问题

• 有5个项目,我试图将项目的宽度设置为20%,但总是包装(请参阅http://jsfiddle.net/L7JGg/6/)
• 将宽度设置为19.8%,我可以将项目设置为不包装,但仅限于全屏.如果我调整大小,它会在我调整屏幕大小后开始换行(请参阅http://jsfiddle.net/smBvM/1/)

这是一个没有全屏包装的例子.

一旦你调整浏览器的大小,它就会包装好

有人可以解释为什么会发生这种情况以及如何正确修复它？

上面的jsFiddle链接有代码演示实时问题,这里是代码.

CSS

ul.nice-menu, ul.nice-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

#zone-menu ul > li {
    width: 19.8%;
    padding: 0;
    margin: 0;
}

ul.nice-menu li {
    margin: 0;
    padding: 0;
}

ul.nice-menu-down li {

}

ul.nice-menu li {
    display: inline-block;
    background-color: #eee;
    position: relative;
}

HTML

<div id="zone-menu">
    <ul class="nice-menu nice-menu-down">
        <li><a href="/">Another Test</a></li>
        <li><a href="/">Test</a></li>
        <li><a href="/">Another Test2</a></li>
        <li><a href="/">Menu Item 2</a></li>
        <li><a href="/">Test3</a></li>
    </ul>
</div>

Answer 1

Lame解决方案

用display: inline-block而不是float: left用于<li>.这将允许他们尊重white-space: nowrap父母,并保持他们在线宽,无论宽度.这还要求您处理<li>元素之间的空白,否则它将在它们之间添加空格.

http://jsfiddle.net/L7JGg/3/

酷解决方案

box-sizing: border-box在<li>s 上使用.20%宽度不包括默认边框box-sizing: content-box.或者我想你可以删除边框......

http://jsfiddle.net/L7JGg/4/