css - 均匀间隔单词，除非在多词短语中(如 'human rights' )

Question

除非在多词短语(如“人权”)中产生如下效果，否则我如何才能均匀地间隔(即完全对齐)单词来填充一行？

Answer 1

您应该为导航菜单使用 html 列表:

教程在这里，但如果你用谷歌搜索还有很多其他的: http://jamesowers.co.uk/css-tutorials/50/horizontal-css-list-menu/

背后的原因:

• 如果 css 不加载/不支持，你的菜单看起来会很好
• 有助于辅助功能
• 从语义上讲，您要显示的是元素列表 - 那么有什么比显示元素的列表更好的呢？

编辑

最简单的解决方案，仅 html/css，解决方案是使用表格，但是当我看到用于布局的表格时，我的眼睛会灼痛。 (根据您想提供的浏览器支持，您可能会使用 ul li 或嵌套的 div 标签和 css display:table-cell/table-row 等)

在这里摆弄:http://jsfiddle.net/nTM3S/

    <table cellpadding="3" class="myTable" style="text-align:center">
        <tr>
           <td>Politics</td>
           <td>Environment</td>
           <td>Economics</td>
           <td>Culture</td>
           <td>Human Rights</td>
           <td>Politics</td>
           <td>Environment</td>
           <td>Economics</td>
           <td>Culture</td>
           <td>Human Rights</td>

        </tr>
    </table>

和CSS:

td {
    width: 1%;
    padding: 20px;
    white-space: nowrap;
    background-color: #ccc;
    color: #900;
}