Question

我有一个水平显示的项目列表，我的导航区域，但它包裹中间链接，像这样

| This is Item One | This is Item Two | This is Item Three | This is
Item Four | This is Item Five |

当我希望它像这样包装时：

| This is Item One | This is Item Two | This is Item Three  
| This is Item Four | This is Item Five |

我尝试在我的链接项（li a）上使用whitespace: nowrap声明，但这只会使第二行（包裹）完全消失。

Answer 1

我相信你要找的是white-space property：

.menu a {
    white-space: nowrap;
}

另一种选择是分配固定宽度并将每个菜单项浮动到左侧。

.menu a {
    display: block;
    float: left;
    width: 200px;
}

当然，CSS会因您的HTML而异。我建议将菜单放在无序列表中，并将这些样式应用于列表项。

Answer 2

我没有你的任何风格和标记，这是我能为解决方案提供的最好的（因为它是对你的问题的确切猜测）：

您需要做的只是将display:inline-block应用于相应的<a>代码。

Answer 3

我意识到这是一个古老的问题，但是由于从未接受过答案，因此在今天的背景下，这是一个答案：

现在，您可以通过将父级设置为display: flex并将white-space: nowrap应用于子级来解决此问题。 flex布局处理链接组的换行，并防止链接本身换行。

<div class="link-group">
  <a class="link">First Link</a>
  <a class="link">Second Link</a>
  <a class="link">Third Link</a>
  <a class="link">Fourth Link</a>
</div>

/* parent */
.link-group {
  display: flex;
  flex-wrap: wrap;
}

/* child */
.link {
  white-space: nowrap;
}

如何使用CSS避免使用中间链接自动换行？

3 个答案: