如何在跨度文本上制作背景颜色圆形

Question

我有一个1背景颜色为红色的跨越文本。我想让背景颜色圆，将包含跨区文本1。但我目前所拥有的并没有做到这一点。

我怎样才能做到这一点？

.text-span{
  background:red;
  border-radius:20px;
}

<span class="text-span">1</span><span>info</span>

Answer 1

首先，您需要将其显示为 inline-block。这允许您操纵其大小。

然后，您需要给他相同的高度，相同的宽度以使其成为正方形。

之后，您将边框半径设为 50%，使其变为圆形。

最后，您可以通过为其指定高度的 line-height 并居中对齐文本来居中。

瞧！

.text-span{
    background:red;
    border-radius:50%;
    height: 26px;
    width: 26px;
    line-height: 26px;
    display: inline-block;
    text-align: center;
    margin-right: 6px;
}

<span class="text-span">1</span><span>info</span>