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和＆amp;苹果浏览器。但在所有IE浏览器中看起来都不同。

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

有没有办法可以在IE中带来相同的效果？

感谢。

Answer 1

您可以通过在输入框周围添加div元素，然后将类“val”的元素设置为float:left来获得所需的效果。同样对fieldset也这样做，并给它类“val”。

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

请参阅http://jsfiddle.net/DaZWW/

块元素内的内联块元素的垂直对齐

1 个答案: