Javascript 文本在框外对齐的方形框

我在css样式方面面临一个问题。我期待着一个3方形框与文本应该出现在框外（右侧）

我有这样的代码

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

关闭
打开
悬而未决的

CSS:

#红色的{
宽度：25px；高度：20px；背景：红色；显示：内联块；
}
#黄色的{
宽度：25px；高度：20px；背景：红色；显示：内联块；
}
#蓝色的{
宽度：25px；高度：20px；背景：红色；显示：内联块；
}

我得到的结果是：

我的预期产出是

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

将代码中的

#

更改为

，然后重试此操作

.wrapper{
浮动：左；
}
瑞德先生{
宽度：25px；
高度：20px；
背景：红色；
显示：内联块；
}
黄先生{
宽度：25px；
高度：20px；
背景：黄色；
显示：内联块；
}
蓝先生{
宽度：25px；
高度：20px；
背景：蓝色；
显示：内联块；
}

关闭
打开
悬而未决的

将代码中的

#

更改为

，然后尝试此操作

.wrapper{
浮动：左；
}
瑞德先生{
宽度：25px；
高度：20px；
背景：红色；
显示：内联块；
}
黄先生{
宽度：25px；
高度：20px；
背景：黄色；
显示：内联块；
}
蓝先生{
宽度：25px；
高度：20px；
背景：蓝色；
显示：内联块；
}

关闭
打开
悬而未决的

试试这个

#红色{
宽度：25px；
高度：20px；
背景：红色；
显示：内联块；
}
#黄色的{
宽度：25px；
高度：20px；
背景：红色；
显示：内联块；
}
#蓝色的{
宽度：25px；
高度：20px；
背景：红色；
显示：内联块；
}

关闭
打开
挂起的

试试这个

#红色{
宽度：25px；
高度：20px；
背景：红色；
显示：内联块；
}
#黄色的{
宽度：25px；
高度：20px；
背景：红色；
显示：内联块；
}
#蓝色的{
宽度：25px；
高度：20px；
背景：红色；
显示：内联块；
}

关闭
打开
挂起

为什么您希望文本在外部结束

无论如何：

.box{
显示：内联块；
利润率：0.5px；
}
.盒子：以前{
内容：“；
宽度：45px；
高度：30px；
垂直对齐：居中；
利润率：0.4px-10%；
显示：内联块；
}
瑞德：以前{
背景色：#E30021；
}
黄：以前{
背景色：#FBC228；
}
蓝：以前{
背景色：#2B9BE3；
}

关闭
打开
挂起

为什么您希望文本在外部结束

无论如何：

.box{
显示：内联块；
利润率：0.5px；
}
.盒子：以前{
内容：“；
宽度：45px；
高度：30px；
垂直对齐：居中；
利润率：0.4px-10%；
显示：内联块；
}
瑞德：以前{
背景色：#E30021；
}
黄：以前{
背景色：#FBC228；
}
蓝：以前{
背景色：#2B9BE3；
}

关闭
打开
挂起的

可能是这样的：

/*块*/
.街区{
显示：内联块；
}
.block.content{
显示：内联块；
垂直对齐：中间对齐；
}
/*盒子*/
.盒子{
显示：内联块；
垂直对齐：中间对齐；
宽度：40px；
高度：40px；
}
.盒子红{
背景色：红色；
}
.盒子绿{
背景颜色：绿色；
}
.蓝色盒子{
背景颜色：蓝色；
}

正文
正文
正文

可能是这样的：

/*块*/
.街区{
显示：内联块；
}
.block.content{
显示：内联块；
垂直对齐：中间对齐；
}
/*盒子*/
.盒子{
显示：内联块；
垂直对齐：中间对齐；
宽度：40px；
高度：40px；
}
.盒子红{
背景色：红色；
}
.盒子绿{
背景颜色：绿色；
}
.蓝色盒子{
背景颜色：蓝色；
}

正文
正文
正文

当您的文本位于具有背景颜色的元素内时-我不确定您为什么认为结果会不同

.key{
显示：内联块；
右边距：10px；
}
.键距{
显示：内联块；
宽度：25px；
高度：20px；
右边距：5px；
背景：#000；
}
.红跨度{
背景：红色；
}
.黄跨度{
背景：黄色；
}
.blue span{
背景：蓝色；
}

关闭
打开
待决

当您的文本位于具有背景颜色的元素内时-我不确定您为什么认为结果会不同

.key{
显示：内联块；
右边距：10px；
}
.键距{
显示：内联块；
宽度：25px；
高度：20px；
右边距：5px；
背景：#000；
}
.红跨度{
背景：红色；
}
.黄跨度{
背景：黄色；
}
.blue span{
背景：蓝色；
}

关闭
打开
挂起的链接已失效，请重新更新背景颜色分别为红色、黄色、蓝色。在代码中，它被误认为是所有div的红色。先生，您指的是哪一个链接？他指的是您在问题中上传的图像，用于输出！现在没事了，不用担心它的链接已经死了，请重新更新背景颜色分别为红色、黄色、蓝色。在代码中，它被误认为是所有div的红色。先生，您指的是哪一个链接？他指的是您在问题中上传的图像，用于输出！现在没事了，别担心，谢谢你们！谢谢你们两个！
<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>