我正在尝试将文本放入嵌套的 div 中,它适用于某些但不适用于所有。当我尝试将文本放在它不起作用的地方时,它会迫使其他 div 元素排成一行。我有一个以前的版本,我以相同的方式嵌套它们并且没有这个问题。知道我哪里出错了吗?
/* my css for the divs */
div.mycard{
background-color: beige;
width: 400px;
height: 35px;
margin-left: 75%;
margin-bottom: 2px;
}
div.cardcost{
background-color: blue;
width: 30px;
height: 35px;
}
div.hscardepic{
background-color: rgb(233, 27, 233);
height: 35px;
width: 5px;
}
div.cardamount{
background-color: black;
width: 30px;
height: 35px;
z-index: 11;
margin-left: 8000%;
}
p.cardname{
z-index: 12;
font-weight: bolder;
margin: 0;
}
<!-- These divs are nested in another div with display: inline-block to put them next to text-->
<div class="mycard">
<div class="cardcost">
<div class="hscardepic">
<div class="cardamount">
<p style="margin-left: 5px;color: white;">×2</p>
</div>
</div>
</div>
</div>
最佳答案
隐藏段落的主要问题是由 div.cardamount
中的 margin-left: 8000%;
引起的,它会将 div 推到视口(viewport)之外
还有一个问题是 cardname
类没有在 p
元素上设置,所以你的 CSS 规则没有应用
这是一个固定版本 https://jsfiddle.net/xr271aen/1/
关于html - 将文本放入嵌套的 div 标签时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56265949/