Question

我试图将元素'.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>

Answer 1

由于它们都是display:inline-block，因此它们会被内联处理，因此您可以将vertical-align:top;放在它们上面以排列它们。或者你可以让他们display:block和float:left。

Answer 2

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

Answer 3

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

影响div对齐的文本

3 个答案: