包装元素时,内联容器不会显示背景颜色

本教程将介绍包装元素时,内联容器不会显示背景颜色的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

包装元素时,内联容器不会显示背景颜色 教程 第1张

问题描述

我尝试显示两个内联div,每个div包装两个块div,我的问题是

为什么内联div没有显示背景,即使当它们有孩子的时候,直到我在里面键入一些东西,背景才显示出来,但只在文本中显示,没有包装孩子。

以下是我的代码:

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.container{
 background-color: rgb(37, 220, 20);

 height: 100px;
 width: 100px;
 /* display:block; */
}
.item{
 background-color: coral;
 margin: 10px;
 height: 25px;
 width: 25px;
}
.block{
 display: inline;
}
<!DOCTYPE html>
<html lang="en">
  <head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Document</title>
 <link rel="stylesheet" href="style.css" />
  </head>
  <body>
 <div class="container block" style="background-color: crimson">
<div class="item"></div>
<div class="item"></div>

 </div>
 <div
class="container block"
style="background-color: rgb(20, 180, 220)"
 >
<div class="item"></div>
<div class="item"></div>
showing BG
 </div>
  </body>
</html>

推荐答案

行内元素没有高度或宽度以及其他一些限制-您应该将它们设置为行内块以达到所需的效果。

在下面的代码片断中-我微笑地将样式更改为内联块,它的工作方式与我相信您希望的一样-我还能够从第二个块中删除文本。

此外-任何元素上似乎都没有&quot;flex-tainer&quot;类。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.flex-container{
 background-color: rgb(37, 220, 20);

 height: 100px;
 width: 100px;
 /* display:block; */
}
.item{
 background-color: coral;
 margin: 10px;
 height: 25px;
 width: 25px;
}
.block{
 display: inline-block; /* I changed this to inline block */
}
<!DOCTYPE html>
<html lang="en">
  <head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Document</title>
 <link rel="stylesheet" href="style.css" />
  </head>
  <body>
 <div class="container block" style="background-color: crimson">
<div class="item"></div>
<div class="item"></div>

 </div>
 <div
class="container block"
style="background-color: rgb(20, 180, 220)"
 >
<div class="item"></div>
<div class="item"></div>
 </div>
  </body>
</html>

好了关于包装元素时,内联容器不会显示背景颜色的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。