无序列表导航 - 水平，固定宽度和分词

Question

我想使用无序列表来显示水平导航。此导航必须是固定宽度。

标记：

<ul id="page-nav">
    <li><a href="#">RRSP Basics</a></li>
    <li><a href="#">Contribution Rules</a></li>
    <li><a href="#">Ways to Fund Your RRSP</a></li>
    <li><a href="#">Investment Options</a></li>
</ul>  

CSS（到目前为止）：

#page-nav { width: 423px; height: 57px; margin: 0; padding: 0; }
#page-nav li { list-style: none; float: left; display: block; height: 35px; margin: 13px 8px 0 8px; padding: 9px 14px 0 14px; text-align: center; }
#page-nav li a { color: #1f1f1f; font-size: 10px; white-space: pre-line; }

如果是firefox，则使用white-space：pre-line会根据需要打破单词以适合ul宽度。这在IE6或IE7中不起作用，我需要点击那些浏览器。在IE中，lis下推到下一行而不是破坏锚点中的单词。
不是一个选项，因为这将在某个时候进行内容管理。

如何使锚点突破单词以适应可用空间？我无法为列表项指定公共宽度，因此这不是一个选项。

它看起来应该如何：

感谢。

Answer 1

尝试Listamatic：

  

您可以使用简单列表并使用不同的层叠样式表来创建完全不同的列表选项吗？ Listamatic在应用于一个简单列表时显示了CSS的强大功能。

选择一个列表，您应该能够在那里找到无效的列表菜单。

Answer 2

IE中不支持

pre-wrap和pre-line＆lt; 8.因此，如果不诉诸table，我不确定替代方案是什么： - （

Answer 3

这是未经测试的，但在你的li上设置宽度应该可以解决问题。