Inline container isn#39;t showing background color when wrapping elements(包装元素时,内联容器不会显示背景颜色)
本文介绍了包装元素时,内联容器不会显示背景颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我尝试显示两个内联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>
推荐答案
行内元素没有高度或宽度以及其他一些限制-您应该将它们设置为行内块以达到所需的效果。
在下面的代码片断中-我微笑地将样式更改为内联块,它的工作方式与我相信您希望的一样-我还能够从第二个块中删除文本。
此外-任何元素上似乎都没有";flex-tainer";类。
数据-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>
这篇关于包装元素时,内联容器不会显示背景颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
沃梦达教程
本文标题为:包装元素时,内联容器不会显示背景颜色
基础教程推荐
猜你喜欢
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 动态更新多个选择框 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01
- 在for循环中使用setTimeout 2022-01-01
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 我什么时候应该在导入时使用方括号 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- 悬停时滑动输入并停留几秒钟 2022-01-01