Question

我怎样才能均匀地填充（即完全证明）单词以填充一行，除非在多字短语（如“人权”）中创建如下所示的效果？

activism human rights etc

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;
}

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;应用于您想要均匀分布的文本行，然后编写多字短语（如“人权”）（适当调整填充）：

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

Answer 4

根据您希望此功能使用哪种浏览器，您的问题的答案可能就像将 放在要保留的短语中一样简单。

Politics Enviroment Economics Human Rights Country

然后，证明整件事。请参阅jsFiddle。

不幸的是，这并不适用于所有浏览器;在IE8和Opera中它没问题，但Firefox和Chrome确实像其他空间一样伸展。

Answer 5

我会为每个元素使用div，并将它们的显示属性设置为内联...例如：

<html>
<head>
    <style type="text/css">
        .food{
            padding:5px;
            display:inline;
        }
    </style>
</head>
<body>
    <div class="food">Hamburger</div>
    <div class="food">Pizza</div>
    <div class="food">Hot Dog </div>
    <div class="food">Chicken</div>

</body>
</html>

除了多词短语（如“人权”）之外的均匀空格词

5 个答案: