html - IE 7 中的文本换行标签

Question

我有一个由<li>标签组成的水平菜单栏，包含链接，所以菜单项看起来像：

<li>
 <a href="...link...">
  <span>Some text</span>
 </a>
</li>

看起来不错，直到菜单栏比屏幕宽。如果发生这种情况，并且最后一个菜单项有一个或多个单词，则该项目的第二个单词会在栏的下方换行。如果屏幕做得更小，那么它工作正常，因为整个<li>只是被包裹到下面的行。

这些<li>标签应用了一些 CSS 样式：

display:block;
padding:5px;
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;

<li>如果我在项目上明确设置宽度，我可以得到我想要的整个包装到下面的行<li>。但是，我不想这样做，因为它们在设计上都是不同的尺寸。

有任何想法吗？

Answer 1

添加white-space:nowrap;

li > a > span
{
    white-space:nowrap;
}

这应该将项目文本保持在一行。

Answer 2

利用

li span {
    white-space: nowrap;
}

而不是子选择器（ li > a > span ），因为并非所有浏览器都支持子选择器。