html - 将文本放入嵌套的 div 标签时出现问题

Question

我正在尝试将文本放入嵌套的 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;">&times;2</p>
            </div>
         </div>  
     </div>
 </div>

Answer 1

隐藏段落的主要问题是由 div.cardamount 中的 margin-left: 8000%; 引起的，它会将 div 推到视口(viewport)之外

还有一个问题是 cardname 类没有在 p 元素上设置，所以你的 CSS 规则没有应用

这是一个固定版本 https://jsfiddle.net/xr271aen/1/