javascript - 文本在框外对齐的方框

Question

我遇到了 CSS 样式方面的问题。我期待一个 3 个方框，其中的文本应该出现在框外(右侧)。

我有这样的代码

<div class="red">Closed</div>
<div class="yellow">Open</div>
<div class="blue">Pending</div>

CSS:

<style>
#red{
width: 25px;height: 20px;background: red;display: inline-block;
}
#yellow{
width: 25px;height: 20px;background: red;display: inline-block;
}

#blue{
width: 25px;height: 20px;background: red;display: inline-block;
}
</style>

我得到的输出是:

我的预期输出是

我不希望我的文本出现在框内。我希望文本显示在框的右侧(外侧)。

Answer 1

为什么您希望文本最终出现在外面？

无论如何:

.box {
  display: inline-block;
  margin: 0 5px;
}

.box:before {
  content: "";
  width: 45px;
  height: 30px;
  vertical-align: center;
  margin: 0 4px -10%;
  display: inline-block;
}

.red:before {
  background-color: #E30021;
}

.yellow:before {
  background-color: #FBC228;
}

.blue:before {
  background-color: #2B9BE3;
}

<div class="red box">Closed</div>
<div class="yellow box">Open</div>
<div class="blue box">Pending</div>