Question

下面的HTML代码始终导致TEXT A和TEXTB没有水平对齐，但删除<div style="display:none;"> </div>会修复对齐。我发现使用div元素而不是p元素来解决这个问题，但我想知道实际发生了什么。我在Opera，Firefox，IE（IE实际上将TEXTB放在一个单独的行）和Chrome中看到了这种行为。

我的期望是display:none的div对格式化没有任何影响。

<html>
    <body>
        <div style="border-top-style: solid;">
            <p style="float:left; width:280px;">
                TEXT A<div style="display:none;">&nbsp;</div>
            </p>
            <p style="float:left;">
                TEXTB
            </p>
        </div>
    </body>
</html>

Answer 1

div不是p的有效子项，因此浏览器会对HTML应用错误更正，最终得到此结果：

<div style="border-top-style: solid;">
    <p style="float:left; width:280px;">
        TEXT A</p><div style="display:none;">&nbsp;</div>
    <p></p>
    <p style="float:left;">
        TEXTB
    </p>
</div>

（从Chrome的Inspector中提取的HTML）

请注意额外的p元素。

Answer 2

首先，你不能把'div'放在'p'里面。所以请改用'span'来看看会发生什么

为什么div有display：none中断格式化？

2 个答案: