如何防止包装内嵌列表

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 solution

display: inline-block使用float: left代替<li>。这将允许他们尊重父级white-space: nowrap，并保持它们在线，无论宽度如何。这还要求您处理<li>元素之间的空白，否则会在它们之间添加空格。

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

冷溶液

在box-sizing: border-box上使用<li>。 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

Flexbox解决方案

感谢CSS flex，这类问题变得相当微不足道。关于这一点的一个好处是，即使有一个包装内容，a-tag元素仍保持相等的高度。

根据需要添加vendor prefixes。

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>