将vertical-align应用于父块元素中的子元素的正确方法

Question

垂直对齐包含div中所有子元素的最佳方法是什么？

• 我应该将vertical-align: top;应用于每个元素吗？
• 可以 只需应用vertical-align: top;即可 一个通配符？

这是我的测试用例。

CSS;

#wrapper * { vertical-align: top; }
#wrapper label { display: inline-block; font-weight: 700; }

HTML;

<div id="wrapper">
    <label>Label: </label><br /><span>(Sub Label)</span></div >
    <input type="textbox" />
</div>

一个jsFiddle; http://jsfiddle.net/vPU3z/7/

（我需要对此进行更多调查，但另外，在IE7中，为什么“标签”采用块格式而不是内联块？文本框是否在标签元素下面。）

Answer 1

对于您应该使用的标签.. <label> tag：

Live Demo

<强> HTML：

<div id="wrapper">
    <label for="example">Label: <br />(Sub Label)</label>
    <input type="text" id="example" />
</div>

<强> CSS：

#wrapper label { 
    vertical-align: top;
    display: inline-block;
    font-weight: 700;
}

Answer 2

对于您的标签：

#label {
 position: absolute;
 top: 0px;
}