防止嵌套的导航项目进入下一行？答案

【问题标题】：Prevent nested nav items from breaking on to the next line?防止嵌套的导航项目进入下一行？
【发布时间】：2014-09-20 19:25:31
【问题描述】：

我有一个基本的水平导航菜单，悬停时会显示一个下拉列表。当下拉链接是单个词时，一切正常，但如果链接超过一个词，即“Lori Ipsum”，则换行。我正在寻找线条以保持其全宽，因此“Lori Ipsum”将显示在同一行。

如何防止换行？

在代码笔中重新创建：http://codepen.io/agconti/pen/zvjkm

html:

<nav role='navigation'>
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">About</a>
      <ul>
        <li>Lorem ipsum</li>
        <li>Aliquam tincidunt</li>
        <li>Vestibulum auctor</li>
      </ul>  
    </li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

css:

html {
  font-size: 1.5em;
}

a {
  color: white;
  text-decoration: none;
  width: 100%;
}

li {
  transition: color 0.15s ease-out,  background-color 0.1s ease-in;
}

ul {
  list-style: none;
  background: blue;
  margin: 0;
}
ul li {
  padding: 1em;
  margin: 0;
  display: inline-block;
  position: relative;
}
ul li:hover {
  background: pink;
}
ul li:hover > ul {
  display: block;
}
ul ul {
  background-color: pink;
  position: absolute;
  display: none;
  padding: 0;
  left: 0;
  top: 100%;
}
ul ul li {
  box-sizing: border-box;
  display: block;
  minwidth: 100%;
}
ul ul li:hover {
  background: #ffa6b6;
  color: white;
}

【问题讨论】：

您的 codepen 演示对我来说似乎很好。我没有看到任何损坏的文本。
@HashemQolami 请再看看。我将演示重置为原始示例。

标签： html css

【解决方案1】：

设置li默认宽度；

或使用

li a {
    white-space: nowrap;
}

【讨论】：

感谢您的回答。我知道nowrap 可以解决这个问题，但我宁愿适当地设置宽度和样式，这样我就不必使用它了。

【解决方案2】：

也许我遗漏了一些东西，但你有一个很好的解决方案，你可以通过为嵌套ul 指定宽度来修复文本换行问题，如下所示：

ul ul {
  background-color: tan;
  position: absolute;
  display: none;
  padding: 0;
  left: 0;
  top: 100%;
  width: 300px;
}

我使用了 300px，但你可以选择一个合适的值。

html {
  font-size: 1.5em;
}

a {
  color: white;
  text-decoration: none;
}

li {
  transition: color 0.15s ease-out,  background-color 0.1s ease-in;
}

ul {
  list-style: none;
  background: blue;
  margin: 0;
}
ul li {
  padding: 1em;
  margin: 0;
  display: inline-block;
  position: relative;
}
ul li:hover {
  background: pink;
}
ul li:hover > ul {
  display: block;
}
ul ul {
  background-color: tan;
  position: absolute;
  display: none;
  padding: 0;
  left: 0;
  top: 100%;
  width: 300px;
}
ul ul li {
  /*      white-space: nowrap;*/
  box-sizing: border-box;
  display: block;
  min-width: 100%;
}
ul ul li:hover {
  background: #ffa6b6;
  color: white;
}
ul ul li a {
  width: 200%;
}

<nav role='navigation'>
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">About</a>
      <ul>
        <li><a href="">Lorem ipsum</a></li>
        <li>Aliquam tincidunt</li>
        <li>Vestibulum auctor</li>
      </ul>  
    </li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>  
<section class="hero">
  <div class="mask"></div>
</section>

【讨论】：

感谢您的回答，但我正在动态填充 li 的文本。因此，如果文本变大，将 lis 设置为固定宽度会带来一些问题。
对于很长的链接文本没有完美的解决方案。不要设置固定宽度，而是设置 min-width 和 max-width 的值，对于链接文本很长的奇怪情况，它们可以换行。

【解决方案3】：

li a {
    white-space: nowrap;
}

【讨论】：