大家好, 我有一个小问题,可能很容易为您解决。但是我现在尝试了很长时间,但我没有机会完成它。
我正在从具有不同字体大小的数据库中检索标签云。每个标签都是一个链接。所有标签之间都有空格。
所有标签都打印到一个 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;
}
谢谢
最佳答案
text-align: justify;
这仅适用于多行列。最后一行将不合理。
在此示例中,您可以使 html 屏幕变宽或变小,并且您会注意到只有当内容有多行时,对齐才有效。恐怕我找不到适合您问题的 css 解决方案。
不过,我已经做了一个 hack,你可以使用,但它只在页面足够宽以容纳标签时才有效。
hacked fix for one-line justified content
我正在使用具有 300 像素填充且只有一个空白的 liner-span。由于它的宽度,它将落到下一行并且第一行将对齐。 overflow hidden 和高度后,标签云框将始终适合页面。但是,当页面太小而无法将所有标签并排放置时,它们就会从 View 中消失。但这是解决这个问题的一种方法......
关于html - 证明在 100% 宽度 div 中对齐 tagcloud?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4118926/