【发布时间】：2013-10-08 07:24:39
【问题描述】：
请在此处找到我的fiddle，我正在尝试了解 div.panel 中内联块元素 (div.lbl) 的垂直对齐背后的逻辑。
<style>
label, .lbl {
width:292px;
display:inline-block;
/* text-align:left; */
}
.val {
display:block;
}
.panel {
border-bottom: 1px dashed red;
}
.lbl {
color: magenta;
}
label {
color:black;
}
</style>
<div class="panel">
<div class="lbl" for="firstname">First name:
<INPUT class="val" type="text" id="firstname" />
</div>
<div class="lbl" for="description">Long field name Long field name Long field name Long field name Long field name Long field name Long field name:
<textarea rows="5" cols="25" class="val" id="description" ></textarea>
</div>
<div class="lbl" for="lastname">Long Last name Long Last name Long Last name
<INPUT class="val" type="text" id="lastname" />
</div>
</div>
<div class="panel">
<div class="lbl" for="firstname1">Long First name Long First :
<INPUT class="val" type="text" id="firstname1" />
</div>
<div class="lbl">First name:
<textarea rows="5" cols="25" class="val" id="description1"></textarea>
</div>
<div class="lbl">Long field name Long field name Long field name Long field name Long field name:
<fieldset class="bank-address">
<label for="address1">Bank Address Line 1</label>
<input type="text" value="" id="address1" name="address1" maxlength="9" />
<label for="address1">Bank Address Line 2</label>
<input type="text" value="" id="address2" name="address2" maxlength="9" />
<label for="address1">Bank Address Line 3</label>
<input type="text" value="" id="address3" name="address3" maxlength="9" />
<label for="address1">Bank Address Line 4</label>
<input type="text" value="" id="address4" name="address4" maxlength="9" />
</fieldset>
</div>
</div>
如果您注意到，所有标签文本（洋红色）都在底部垂直对齐，并且它们各自的字段元素在顶部垂直对齐，这样文本的底部在同一行中对齐，并且字段元素的顶部似乎已经对齐在同一行。 （Click here 查看小提琴页面的显示）这是我试图实现的对齐方式，适用于 Firefox、Chrome 和 Safari。但在所有 IE 中看起来都不同。
在 IE 中，似乎所有 div.lbl 都有垂直对齐的底部。
有没有办法在IE中也能带来同样的效果？
谢谢。
【问题讨论】：
-
您愿意对您的标记进行细微的更改吗？我以前从未注意到这种行为，所以很有趣。
-
是的，我可以尝试更改提供相同对齐效果的标记。也请查看之前发布的此链接*.com/questions/19005614/… 以获得相同的对齐效果。