html - h3 元素未正确填充带有水平滚动条的 div

Question

这是问题的两个快照。

看看h3的黄色背景是怎么切掉的？

这是一个jsfiddle

代码如下:

    <style>
        .OutputDiv {
            background-color: lightcyan;
            overflow: auto;
            border: solid 2px black;
            width: 500px;
        }

        h3 {
            margin-top: 0px;
            background-color: yellow;
        }
    </style>


    <div class="OutputDiv">
        <h3>My Title is Here</h3>
        <pre>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
               </pre>
    </div>

我知道我可以添加另一个带有背景色的 div 来包含 h3，但 h3 是 block 级元素。

有什么想法吗？

Answer 1

尽管<pre>是一个 block 级元素，它的内容的行为在这种情况下是不同的。由于内容必须保留换行符和空格，因此 <pre>标记使用属性 white-space: pre;默认情况下。在你的情况下，<pre>和 <h3>元素表现得像 block 元素，所以它们的宽度由它们的父元素设置。但是，<pre> 中的文本元素不遵循这些规则并溢出，导致滚动条显示在父元素上。

如果您只是使用等宽字体的 pre 标签，您可以应用 white-space: normal规则<pre>元素。

否则，如果不需要此 HTML 结构，您可以添加 overflow: auto到 <pre>元素，并将其从包装元素中删除。

pre {
  overflow: auto;
  margin-bottom: 0;
}

编辑: 如果您希望整个 div 可滚动，请在<h3> 周围添加一个包装div。和 <pre> , 并将其显示设置为 inline-block .这将强制内部包装器从其内容中获取宽度，并且还将强制 block 级别 <h3>以匹配此宽度。查看this fiddle一个演示。这确实引入了一个垂直滚动条，但删除了 margin-bottom来自 <pre>应该解决这个问题。

编辑 2: 是的，这是 fixed fiddle .