18

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

| 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 |

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

4

3 回答 3

15

我相信您正在寻找的是white-space 属性：

.menu a {
    white-space: nowrap;
}

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

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

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

于 2012-08-27T19:16:11.050 回答
5

在没有您的任何样式和标记可供我使用的情况下，这是我可以提供的最佳解决方案（因为这是对您的问题到底是什么的疯狂猜测）：

您需要做的就是应用display:inline-block到适当的<a>标签。

于 2012-08-27T20:09:13.153 回答
1

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

如今，您可以通过将父级设置为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;
}
于 2020-07-23T22:53:54.603 回答