如何使用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 | 

我尝试whitespace: nowrap在我的链接项(li a)上使用声明,但这只是使第二个(包裹的)行完全消失.

Answer 1

我相信你要找的是白色空间:

.menu a {
    white-space: nowrap;
}

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

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

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

Answer 2

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

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