html - 如何防止内联列表换行

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

蹩脚的解决方案

使用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/

Answer 2

你得到这个的原因是因为每个li边框都是 20% 宽 + 1 px 的边框。您可以使用负边距来解决此问题以进行补偿。

添加margin: 0 -1px;到 CSS 选择器ul.nice-menu li

Answer 3

弹性盒解决方案

多亏了 CSS flex，这类问题变得相当简单。关于这一点的一件好事是，即使有包装内容，a-tag 元素也保持相同的高度。

根据需要添加供应商前缀。

ul {
  display: flex;
}

li {
  display: flex;
  width: 20%;
  border: 1px solid black;
}

li:not(:first-child) {
  border-left-width: 0;
}

a {
  flex-grow: 1;
  color: white;
  text-align: center;
  font-family: sans-serif;
  text-decoration: none;
  padding: 10px 15px;
  background-color: #72c2cc;
}

a:hover {
  color: #000;
}

<ul style="list-style: none; margin: 0; padding-left: 0;">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3 wraps first</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>