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

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

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

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

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