vertical-align with float和匿名框标签

Question

我是CSS / HTML的新手，并且很难理解为什么在放置文字＆＃34;标题＆＃34;超出div.position容器标签。谢谢你的帮助。

My code

CSS代码：

div {
    display: inline-block;
}
.position {
     float: left;
}

HTML code：

<div>
    <label>Label</label>
    <div class="group">
        <div class="position">
            <input type="radio" />
        </div>
        Title
    </div>
</div>

Answer 1

vertical-align的默认值是基线。

这就是为什么标签出现在父div的基线上的原因。 （见图）

然而，当标题文本在位置div内时，div的高度较小 - 这就是为什么它看起来像标签保持在顶部。实际上它仍处于父div的基线。

如果您在标签上设置vertical-align:top，它将显示在顶部，就像它应该

<强> FIDDLE

Answer 2

您需要将标签float设置为left：

label {
    float: left;
}

http://jsfiddle.net/w6kosc2v/2/

Answer 3

这是一篇关于浮动如何工作的好文章：All About Floats这可能会向你解释一些关于浮动的内容。

很快就说浮子会浮到你设置的那一边; float: right浮动到右边，而图像浮动到右边，所有其他内联元素都会围绕浮动，你的<label>标记做了。您可以通过从float: left移除.position或将其添加到标签来解决此问题。

我希望这个awnser能让它更加清晰。