水平对齐具有不同尺寸的div

Question

我有一个不同字体大小的标签云。

<div>
    <a style="font-size:15px;">tag1</a>
    <a style="font-size:10px;">tag1</a>
</div>

它看起来像这样：

alt text http://img69.imageshack.us/img69/5120/49274398.gif

现在我需要将每个标记包装到它自己的div中：

    <style>
        .cloud {float:left}
        .tag {float:left}
    </style>
    <div class="cloud">
        <div class="tag"><a style="font-size:15px;">tag1</a></div>
        <div class="tag"><a style="font-size:10px;">tag1</a></div>
    </div>

这使他们到处都是。如何使它们看起来像第一张图片？

alt text http://img26.imageshack.us/img26/7355/12644278.gif

更新：如果我为.tag设置固定高度，它的外观如下： alt text http://img710.imageshack.us/img710/3385/59552565.gif

Answer 1

替换

.tag {float:left}

通过

.tag {display: inline}

或者还有其他原因让你浮动所有标签吗？

Answer 2

可能会增加较小字体大小的行高或垂直填充。发生这种情况的原因是因为较小的那些正在按照规范中的设计缠绕较大的那些，因此通过增加较小元件的面积的大小，应该防止包裹。

顺便说一句，是否有必要首先浮动标签？在第一个例子中正常地将它们全部放在一行似乎具有相同的效果。