css如何让数字圆形排列 |scss的hover

最简单的方法是使用border-radius属性来设置数字的圆角。大家可以将一个span标签设置成圆形，然后设置其文本居中，即可得到一个圆形数字：

span {
display: inline-block;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
border-radius: 50%;
background-color: #f00;
color: #fff;
font-weight: bold;
}

这里大家通过设置宽度、高度、行高和文本对齐方式，让文本居中显示在圆形内部，然后设置border-radius为50%，即可得到一个圆形数字。

如果大家要排列多个圆形数字，可以使用CSS的flex布局，将父元素的display属性设置成flex，然后使用justify-content和align-items属性分别设置水平和垂直方向的对齐方式，即可得到一个圆形数字排列：

div {
display: flex;
justify-content: center;
align-items: center;
}
span {
display: inline-block;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
border-radius: 50%;
background-color: #f00;
color: #fff;
font-weight: bold;
margin: 0 8px;
}

这里大家使用了一个div作为父元素，将其display属性设置成flex，然后设置justify-content和align-items属性来让圆形数字在中心排列。大家还设置了span标签的margin属性，来控制相邻圆形数字之间的距离。

总之，通过CSS的border-radius和flex布局，大家可以轻松地让数字排列成圆形，并实现多个数字的排列。这在制作网站时将会非常实用。