塊元素內嵌塊元素的垂直對齊

Question

請在這裏找到我的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中帶來同樣的效果呢？

感謝。

Answer 1

您可以通過在輸入框周圍添加div元素，然後將類爲「val」的元素設置爲float:left來獲得所需的效果。對字段集也做同樣的事，並給它類「val」。

添加的div會導致輸入元素在新行上開始，並且float將輸入元素帶出流，並將每個行內塊框中的最後一行文本用作該行的基線框。

請參閱http://jsfiddle.net/DaZWW/