IE 7中的文本换行<li>标签</li>

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＆gt; a＆gt; span），因为所有浏览器都不支持子选择器。