除包含多个单词的短语(如'human rights')外，单词间隔均匀)

Question

我怎样才能均匀地间隔(即。完全对齐)除了在包含多个单词的短语(如“人权”)中以产生如下效果之外，其他单词是否可以填充一行？

​

​

Answer 1

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

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

背后的原因：

supported

• helps accessibility

• semantically，
• 如果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;
}

Answer 2

将您的项目放入<ul>并为每个<li>添加边距

查看演示：http://jsfiddle.net/L8qnh/3/

Html

<ul>
    <li>Politics</li>
    <li>Enviroment</li>
    <li>Economics</li>
    <li>Human Rights</li>
    <li>Country</li>
</ul>

Css

ul{
    list-type:none;
}

li{
    float: left;
    margin-right: 40px;
}

Answer 3

将text-align: justify;应用于您希望均匀间距的文本行，并编写多个单词的短语(如'human rights')，如下所示(适当调整填充)：

<span style="padding-right:3px;">Human</span>rights