代码之家  ›  专栏  ›  技术社区  ›  matt

在100%宽度div中对齐tagcloud?

  •  0
  • matt  · 技术社区  · 14 年前

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

    所有标记都打印到100%宽度且文本对齐的div#tagcloud->中

    e、 这是我的口号。我对每个链接都做了一个新行,以便在这里有一个更好的结构,但是实际上每个链接之间只有一个空间。

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

    你知道我该如何解决这个问题,使标记云在100%宽的div中有适当的间隔吗?

    css:

    #tagcloud {
        padding:15px;
        line-height:22px; /*depending on the fontsizes set*/
        text-align:justify;
    }
    

    3 回复  |  直到 14 年前
        1
  •  0
  •   Justus Romijn Tim T    14 年前
    text-align: justify;
    

    这只适用于多行列。最后一行将不对齐。

    live example

    不过,我已经做了一个黑客,你可以使用,但它只有当页面足够宽的标签。

    hacked fix for one-line justified content

    我使用的是一个300像素填充的线性范围,只有一个空白。因为它的宽度,它将下降到下一行,第一行将被调整。隐藏溢出和高度后,标记云框将始终适合页面。但当页面太小,无法容纳每个标签旁边的所有标签时,它们将从视图中消失。但这是解决这个问题的一种方法。。。

        2
  •  0
  •   lavelle    14 年前

    网页设计和HTML/CSS布局,你的职位是“设计师”,问 Doctype .

        3
  •  0
  •   user6054579    9 年前

    我也有类似的问题。只有当我在字距内添加空格时,它才对我起作用。例如,就像这样:

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

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