2010-11-07 41 views
0

嘿家伙, 我有一个小问题,可能很容易为你解决。但是我现在试了很长时间,我没有机会完成它。证明对齐100%宽div的tagcloud?

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

所有标签印刷得到进入一个div#tagcloud - >这是100%的宽度,并具有文本对齐:证明

我不知道我做错了,以调整它们的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; 
} 

谢谢

+0

@user可以为您提供的CSS也使我们可以解决这个问题,如果有空间意味着你有可能给一些填充,元素之间的边距。我在http://www.art.com/gallery/id--c23944/fine-art-prints.htm上实施了标签claud?ui = B0891091EAB24C02B95D120BE947CCFE,鼠标悬停任何图像并单击更多主题。我们可以很容易地解决这个问题 – kobe 2010-11-07 19:55:00

+0

我编辑了我的文章 - 上面张贴了css! – matt 2010-11-08 09:17:20

回答

0
text-align: justify; 

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

live example

在这个例子中,你可以使HTML的屏幕更宽和更小,并且可以注意到理由只能当内容有多条线路。恐怕我找不到适合您问题的css解决方案。

但是,我做了一个黑客,你可以使用,但它只适用于页面足够宽的标签。

hacked fix for one-line justified content

我使用的是内衬跨度有300个像素填充和只有一个空格。由于它的宽度,它会下降到下一行,第一行将是合理的。随着隐藏的溢出和高度,标签云盒子将始终适合页面。但是,当页面太小而不能将所有标签放在彼此旁边时,它们就会掉到视线外。但它是解决这个问题的一种方法...

0

如果你的问题是关于... 网页设计和HTML/CSS布局,你的工作标题是 “设计师”,要求对Doctype

0

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

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

,而这次没:

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