html - 证明在 100% 宽度 div 中对齐 tagcloud？

Question

大家好，我有一个小问题，可能很容易为您解决。但是我现在尝试了很长时间，但我没有机会完成它。

我正在从具有不同字体大小的数据库中检索标签云。每个标签都是一个链接。所有标签之间都有空格。

所有标签都打印到一个 div#tagcloud -> 宽度为 100% 并具有 text-align:justify

我想知道我做错了什么以使它们在 100% div 内对齐。我想在某些标签之间留出更多空间，以便在左侧和右侧具有相同的边距。

例如这是我的标签云。我在每个链接中都换行，以便在此处的论坛中拥有更好的结构，但实际上每个链接之间只有一个空格。

<div class="tagcloud">
    <a style="font-size: 40pt;" title="6 posts" class="tag-link-5" href="http://mydomain.com/?tag=cars">cars</a>
    <a style="font-size: 40pt;" title="6 posts" class="tag-link-6" href="http://mydomain.com/?tag=home">home</a>
    <a style="font-size: 15pt;" title="3 posts" class="tag-link-10" href="http://mydomain.com/?tag=animals">animals</a>
    <a style="font-size: 15pt;" title="3 posts" class="tag-link-9" href="http://mydomain.com/?tag=water">water</a>
    <a style="font-size: 25pt;" title="4 posts" class="tag-link-8" href="http://mydomain.com/?tag=health">health</a>
    <a style="font-size: 40pt;" title="6 posts" class="tag-link-7" href="http://mydomain.com/?tag=umbau">music</a>
</div>

知道如何解决这个问题，使 tagcloud 在 100% 宽的 div 内正确间隔吗？

CSS:

#tagcloud {
    padding:15px;
    line-height:22px; /*depending on the fontsizes set*/
    text-align:justify;
}

谢谢

Answer 1

text-align: justify;

这仅适用于多行列。最后一行将不合理。

live example

在此示例中，您可以使 html 屏幕变宽或变小，并且您会注意到只有当内容有多行时，对齐才有效。恐怕我找不到适合您问题的 css 解决方案。

不过，我已经做了一个 hack，你可以使用，但它只在页面足够宽以容纳标签时才有效。

hacked fix for one-line justified content

我正在使用具有 300 像素填充且只有一个空白的 liner-span。由于它的宽度，它将落到下一行并且第一行将对齐。 overflow hidden 和高度后，标签云框将始终适合页面。但是，当页面太小而无法将所有标签并排放置时，它们就会从 View 中消失。但这是解决这个问题的一种方法......