div后的CSS文本

}

新订单

---

我希望文本“New Order”显示在圆框旁边，而不是向下显示。如何实现这一点？

将

显示

属性值更改为

内联块

即可

.legend{
显示：内联块；
宽度：40px；
高度：40px；
边界半径：10px；
背景颜色：橙色；
垂直对齐：中间；/*确保文本垂直对齐在中间*/
}

新订单

使用

显示：内联表；

而不是

显示：表格；

.legend{
显示：内联表；
宽度：40px；
高度：40px；
边界半径：10px；
背景：橙色；
}

---

新订单

要在方框旁边显示文本并给出适当的行高，可以使用以下代码：

.legend包装器{
线条高度：40px；/*与块的高度相同*/
}
.传奇{
显示：块；
浮动：左；
宽度：40px；
高度：40px；
边界半径：10px；
背景：橙色；
右边距：10px；/*在文本和块之间添加一些*/
}

新秩序

Add

float：左to.legendOk谢谢，如果我想让“新秩序”以div为中心，看起来也像OP。如果您不介意我的建议，您也可以在
图例中添加
垂直对齐：中间
rule@JosephMarikle你的建议很完美，我已经加上了。
.legend {
display: table;
width: 40px;
height: 40px;
border-radius: 10px/10px;

<div style="background: orange" class="legend"></div> New Order