0

除非在多词短语（如“人权”）中产生如下效果，否则我如何均匀间隔（即完全证明）单词以填充一行？

激进主义人权等

4

5 回答 5

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;
}
于 2012-06-15T11:00:11.227 回答
2

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

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

背后的原因：

  • 如果 CSS 不加载/不支持，你的菜单看起来不错
  • 帮助可访问性
  • 从语义上讲，您正在显示一个项目列表 - 那么有什么比显示它们的列表更好的呢？

编辑

最简单的，仅限 html/css 的解决方案是使用表格，但是看到用于布局的表格，我的眼睛会燃烧。（根据您要提供的浏览器支持，您可能会摆脱ul li或嵌套div标签和 cssdisplay: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;
}
于 2012-06-15T10:56:30.737 回答
0

根据您希望它在哪些浏览器中工作，您的问题的答案可能很简单，只需将 a&nbsp;放在您想要放在一起的短语中。

Politics Enviroment Economics Human&nbsp;Rights Country

然后，证明整个事情的合理性。请参阅jsFiddle。

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

于 2012-06-15T12:15:25.960 回答
0

我会为每个元素使用一个 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>
于 2012-06-15T12:16:27.840 回答
0

应用text-align: justify;到您想要均匀间隔的文本行，然后编写多词短语（如“人权”）（适当调整填充）：

<span style="padding-right:3px;">Human</span>rights
于 2012-06-15T10:52:55.187 回答