Question

<html>
    <body>
       <div style="display: inline; background-color: #555;">
            <h3>test</h3>
       </div>
    </body>
</html>

这是我的代码。我想知道为什么我的背景颜色没有显示。如果我将css显示从内联更改为阻止，则会显示。如果显示是内联的，为什么不显示？ 我试图了解问题的原因，而不是寻找解决方案。

Answer 1

如果div是内联的，则div不会占用空间。如果您想要一个显示为子项高度的内联元素，请使用display: inline-block;。

至于一个好的讨论，我相信QuirksMode比我自己更好。要点是inline元素不会将其他元素排除在外。

Answer 2

问题是您在H3内有blocking element，inline element。

你可以看到发生了什么：

h3
{
    background-color: inherit;   
}

或使H3内联：

h3
{
 display: inline;   
}

Answer 3

简单的解决方案，在某些情况下最好是在包含标题的内联div中添加一些填充

<div style="display: inline; background-color: #555; padding:5px;">
<h3>test</h3>
</div>

Answer 4

CSS2.1的最新修订版就这件事说了一遍：

当内联框包含流内块级别框时，内联框（以及它在同一行框内的内联祖先）被打破了块级框（以及任何连续的块级兄弟）或者仅由可折叠的空白和/或流出来分开元素），将内联框拆分为两个框（即使其中一个边是空的），块级盒子的每一边都有一个。这条线休息前和休息后的盒子都是匿名的块框，块级框成为那些兄弟匿名盒子。当这样的内联框受相对影响时定位，任何产生的翻译也会影响块级别包含在内联框中的框。

换句话说，从布局的角度来看，内联div和h3组合形成一个内联框，一个块框和另一个内联框。只有两个内联框采用格式（即背景颜色），块框不会形成div定义的内联框的任何部分，因此采用默认的背景颜色设置（透明，通过背景显示）其包含块的颜色）。

Answer 5

如果您尝试创建荧光笔效果，请使用以下代码：

<h3><span style="background-color: #555;">test</span></h3>

Answer 6

默认情况下，

div是一个块元素。将块元素的显示模型更改为内联不是一个好习惯。标题也是块元素。将块元素嵌套到内联元素中是无效的html。如果你想要一个高亮效果（给文本而不是整个元素框提供背景颜色），你需要使用像span这样的内联元素。

<html>
    <body>
       <div>
            <h3><span style="background-color: #555;">test</span></h3>
       </div>
    </body>
</html>

如果我有显示，为什么我的背景颜色不显示：内联？

6 个答案: