Question

嘿伙计们，我有一个小问题，可能很容易为你解决。但是我现在尝试了很长时间，我没有机会完成它。

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

将所有标签打印到div＃tagcloud - ＆gt;它的宽度为100％，并且有text-align：justify

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

e.g。这是我的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;
}

谢谢

Answer 1

如果您的问题是关于...... 网页设计和HTML / CSS布局，你的职位是“设计师”，问Doctype。

Answer 2

text-align: justify;

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

live example

在此示例中，您可以使html屏幕更宽更小，并且您可以注意到仅当内容有多行时，对齐才起作用。我担心我找不到适合你问题的css解决方案。

但是，我已经制作了一个你可以使用的黑客，但只有在页面足够宽的标签时才能使用。

hacked fix for one-line justified content

我正在使用具有300像素填充的衬里跨度，并且只有一个空格。由于它的宽度，它将下降到下一行，第一行将被证明是合理的。隐藏溢出和高度，标签云框将始终适合页面。但是当页面太小而无法容纳彼此旁边的所有标签时，它们将会脱离视野。但这是解决这个问题的一种方法......

Answer 3

我有类似的问题。当我在跨度内的单词周围添加空格时，它只对我有用。例如，像这样工作：

<a class="tag-link-5"> cars </a>

虽然没有：

<a class="tag-link-5">cars</a>

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

3 个答案: