2010-11-07 39 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>