我有以下html元素：
<fieldset style="margin:20px;border:5px solid red;padding:0;">
<label class="offset widget" >Title goes here</label>
<input class="offset widget" style="padding:0" type="text" name="fname">
<div class="offset" style="position:relative;width:120px;display:inline-block;">
<select class="widget" style="position: absolute; left:0;top:0;">
<option value="en_KW">English</option>
<option value="ar_KW">Arabic</option>
</select>
</div>
</fieldset>
和CSS样式：
.offset{
margin-left:40px;
margin-right:0;
}
.widget{
width:120px;
height:16px;
text-align:right;
text-height:16px;
font-size:11px;
font-family:arial;
border:2px solid black;
float:left;
padding:0;
}
也在jsfiddle上：http://jsfiddle.net/tPzqG/5/
1）为什么如果我将div显示设置为内联，则不考虑边距？标签和文本输入元素也是内联元素，并且考虑了边距。（在chrome中，而不在Firefox中）
2）为什么选择高度小于标签和文本输入的高度，尽管三个都指定了高度并且相同？
3）文本对齐对标签有效，但对选择无效（仅适用于chrome）。有没有方向：rtl可以解决这个问题吗？
4）为什么如果在div显示为行内块时未指定div高度，那么div会移到字段集下方吗？（仅在jsfiddle中）
最佳答案
1）如您在Chrome开发人员工具中所见，div元素的尺寸为0x0。因为您将block元素放入了inline元素。这是不正确的。请记住，当您设置float或元素的绝对位置时，它会自动变为块元素。
2）我再次链接到Chrome开发人员工具。在开发人员工具中，您可以看到浏览器引擎稍有不同就可以计算选择元素的高度。它包括边界高度。
在正常情况下：
实际高度=高度+边框顶部，底部高度+填充顶部，底部高度
在这种情况下：
实际高度=高度-边框顶部，底部高度+边框顶部，底部高度
3）样式选择不起作用-这是正常情况。将选择元素重新分配给浏览器，浏览器不允许这样做。当然会有例外，但是在每个浏览器中是不同的
4）我认为这是因为与第一点相同。浏览器布局过程变得疯狂，并错误地计算了元素的偏移量。
我建议您阅读有关浮动，定位，选择样式和方向的信息：http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
关于css - html元素对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14876188/