css实现：不固定宽高，随内容宽度自动增长的圆形

css代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

.circle {   display: inline-block;   border-radius: 50%;   min-width: 20px;   min-height: 20px;   padding: 5px;   background: red;   color: white;   text-align: center;   line-height: 1;   box-sizing: content-box;   white-space: nowrap; } .circle::before {   content: "";   display: inline-block;   vertical-align: middle;   padding-top: 100%;   height: 0; } .circle span {   display: inline-block;   vertical-align: middle; }

html代码

?

1 2 3 4 5

<div class="circle"><span>8</span></div> <div class="circle"><span>64</span></div> <div class="circle"><span>512</span></div> <div class="circle"><span>4096</span></div> <div class="circle"><span>9999999999</span></div>

参考网址：html - CSS circle without using fixed width and height - Stack Overflow