证明在100％宽度div中对齐tagcloud？

大家好，我有一个小问题，可能很容易为你解决。但是我现在尝试了很长时间，我没有机会完成它。我正在从具有不同字体大小的数据库中检索tagcloud。每个标签都是一个链接。并且所有标签之间都有空格。所有标签都打印到div＃tagcloud - >，其宽度为100％，并且具有text-align：justify 我想知道我做错了什么，以便在100％div中对齐它们。我想在某些标签之间留出更多空间，以便在左侧和右侧具有相同的边距。例如这是我的tagcloud。我在这个论坛中为每个链接创建了一个新行，以便在这个论坛中有更好的结构，但实际上每个链接之间只有一个空格。

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

谢谢

已邀请:

3 个回复

撕吠

text-align: justify;

这仅适用于多行列。最后一行不合理。实例在此示例中，您可以使html屏幕更宽更小，并且您可以注意到，只有当内容包含多行时，对齐才起作用。我担心我找不到适合你问题的css解决方案。但是，我已经做了一个你可以使用的黑客攻击，但只有在页面足够宽的标签时才能使用它。黑客修复了一行合理的内容我使用的是具有300像素填充的衬里跨度，并且只有一个空格。由于它的宽度，它将下降到下一行，第一行将被证明是合理的。隐藏溢出和高度，标签云框将始终适合页面。但是当页面太小而无法容纳彼此旁边的所有标签时，它们将会脱离视野。但这是解决这个问题的一种方法......