block 元素内行内 block 元素的垂直对齐

Question

请找到我的fiddle在这里，我试图理解 div.panel 中内联 block 元素 (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 查看 fiddle 页面的显示)这是我正在尝试实现并在 Firefox、Chrome 和 Safari 中工作的对齐方式。但在所有 IE 中看起来都不一样。

在 IE 中，似乎所有的 div.lbl 都有垂直对齐的底部。

有没有办法在 IE 中也能带来同样的效果？

谢谢。

Answer 1

您可以通过在输入框周围添加一个 div 元素，然后将类为“val”的元素设置为 float:left 来获得您想要的效果。对字段集也做同样的事情，并给它类“val”。

添加的 div 导致输入元素在新行开始，float 将输入元素从流中取出，留下每个内联 block 框的最后一行文本用作该框的基线.

参见 http://jsfiddle.net/DaZWW/