如何将文本放在进度条div之前

Question

我想把进度条和文本放在同一行。

我尝试在全局div上使用display: flex;，但它没有改变任何内容。

.ratio-background {
background-color: red;
}
.ratio-main {
height: 12px;
background-color: green;
}

<div>
<p>
Ratio
</p>
<div>
<div class="ratio-background">
<div class="ratio-main" style="width: 30%"></div>
</div>
</div>
</div>

Answer 1

您希望在父级上设置display: flex;。在这种情况下，我称之为.wrapper。因为.ratio-background没有内容，所以需要定义一个width来显示它。

.ratio-background {
background-color: red;
width: 90%;
}
.ratio-main {
height: 12px;
background-color: green;
}
.wrapper {
display: flex;
align-items: center;
justify-content: space-around;
}

<div class="wrapper">
<p>Ratio</p>
<div class="ratio-background">
<div class="ratio-main" style="width: 30%"></div>
</div>
</div>