Question

为什么这两行“第一文本”和“第二文本” 不同不在同一行上？

<html>
    <body style="width: 20px;">
        <div style="width: auto; display: block; white-space: nowrap;">
            <div style="display: inline-block; float: left;">First text</div>
            <div style="display: inline-block; float: left;">Second text</div>
        </div>
    </body>
</html>

Answer 1

因为要浮动元素。

删除float: left;，或将其设为display: block;

另请参阅：Difference Between 'display: block; float: left' vs. 'display: inline-block; float: left'?

<html>
    <body style="width: 20px;">
        <div style="width: auto; display: block; white-space: nowrap;">
            <div style="display: inline-block;">First text</div>
            <div style="display: inline-block;">Second text</div>
        </div>
    </body>
</html>

Answer 2

float: left取消了display: inline

<html>
    <body style="width: 20px;">
        <div style="width: auto; display: block; white-space: nowrap;">
            <div style="display: inline-block;">First text</div>
            <div style="display: inline-block;">Second text</div>
        </div>
    </body>
</html>

Answer 3

将float:none与display: inline-block一起使用

同一行上的两个div

3 个答案: