2

请在这里找到我的小提琴，我试图了解 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>

如果您注意到，所有标签文本（洋红色）都在底部垂直对齐，并且它们各自的字段元素在顶部垂直对齐，这样文本的底部在同一行对齐，而字段元素的顶部似乎在同一行对齐线。（单击此处查看小提琴页面的显示）这是我试图实现的对齐方式，适用于 Firefox、Chrome 和 Safari。但在所有 IE 中看起来都不同。

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

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

谢谢。

4

1 回答 1

1

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

添加的 div 导致输入元素从新行开始，浮动将输入元素从流中取出，将每个 inline-block 框中的最后一行文本用作该框的基线。

见http://jsfiddle.net/DaZWW/

于 2013-10-07T23:24:39.430 回答