logo标签列表

为什么display:none的div会破坏格式？

htmlcss
3
以下HTML代码经常导致文本A和文本B在水平方向上不能对齐，但是删除<div style="display:none;">&nbsp;</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>
2个回答
4
不是

的有效子元素，因此浏览器会对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的检查器中获取的HTML)

请注意额外的p元素。

2

首先，你不能在 'p' 标签内部放置 'div' 标签。因此，请改用 'span' 标签并查看结果。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接