0

我试图让元素 '.wrap1' 和 '.wrap2' 的顶部对齐。正如您在这个jsfiddle中看到的那样，“wrap1”的顶部略低于“.wrap2”，但是当我从“.wrap2”中删除显示的文本时，顶部确实对齐。谁能解释为什么文本降低了“.wrap1”的顶部？

<html>

<body>
    <ul
    style="margin:0px 0px!important;position:relative;width:100%"
    class="mainList"
    id="dateMainList">
        <li
        class="list-element"
        id=""
        style="width:100%">
            <div
            class="list-inner-wrap"
            style="border:1px solid black">
                <div
                class="wrap1"
                style="display:inline-block;background:white;border:2px solid black;height:50px;width:50px">
                    <div
                    class="line-1"
                    style="display:block;text-align:center;font-size:10pt">1</div>
                        <div
                        class="line-2"
                        style="display:block;text-align:center;font-size:10pt">2</div>
                            <div
                            class="line-3"
                            style="display:block;text-align:center;font-size:10pt">3</div>
                                </div>
                                <div
                                class="wrap2"
                                style="display:inline-block;height:50px;background:green;width:200px"></div>
                                    </div>
                                    </li>
                                    </ul>
</body>
4

3 回答 3

4

由于它们都是display:inline-block内联处理，因此您可以将它们都穿上vertical-align:top;以将它们排成一行。或者你可以制作它们display:block和float:left.

于 2013-09-16T01:50:06.613 回答
0

添加float:left;到.wrap1 & wrap2或仅添加到.wrap1

于 2013-09-16T01:41:58.837 回答
0

做位：绝对；任何具有该属性的元素都不会影响任何其他元素。

于 2013-09-16T03:22:20.363 回答