Html 不使用固定宽度和高度的CSS圆形

我希望在圆圈内显示通知计数，但我不希望它具有固定的宽度，以便当圆圈内有较大的数字/文本时，圆圈可以展开

.circle{
高度：20px；
宽度：20px；
线高：20px；
边界半径：50%；
背景色：红色；
颜色：白色；
文本对齐：居中；
}

5


102

尝试使用边界半径：50%并设置最大宽度和高度

是一个快速示例，您可以在其中了解如何使用css和js动态维护圆

---

正如贾吉特·辛格（Jagjit Singh）指出的，你可以使用

边界半径：50%来实现一个圆而不是固定的像素值。
请查看此CSS专用解决方案。为1位数字设置相同的
min width
和
min height
。使用伪图元进行垂直对齐并保持方形。带
边框的半径
应用于圆的容器


.circle{
显示：内联块；
边界半径：50%；
最小宽度：20px；
最小高度：20px；
填充物：5px；
背景：红色；
颜色：白色；
文本对齐：居中；
线高：1；
框大小：内容框；
空白：nowrap；
}
.圆圈：之前{
内容：“；
显示：内联块；
垂直对齐：中间对齐；
填充顶部：100%；
身高：0；
}
.圆跨度{
显示：内联块；
垂直对齐：中间对齐；
}
8
64
512
4096
这是一个非常粗糙的版本，但它似乎可以在所有主流浏览器的最新版本上查看，所以我还是要发布它。基本原则是基于百分比的填充（甚至顶部和底部填充）与父对象的宽度相关。将其设置为
100%
，宽度和高度为
0
，理论上意味着元素的高度始终等于宽度。将其与伪元素相结合，您甚至不需要更改标记。我使用flexbox来纠正内容的居中。它似乎在我测试它的浏览器上工作，但这肯定取决于最新版本，因为它使用
flexbox
和
display:table
。我还必须添加一个
minwidth
，以确保它不会因为内容太少而变形


.circle{
背景色：红色；
颜色：白色；
文本对齐：居中；
位置：相对位置；
边界半径：50%；
最小宽度：1.25em；
显示：内联flex；
对齐项目：居中；
证明内容：中心；
}
.圆圈：之后{
内容：''；
填充顶部：100%；
显示：表格；
}
5


102


4298347918
适用于几乎永远有效的圆圈的简单CSS：

.circle {
    position: relative;
    border-radius: 50%;
    width: 100%;
    height: auto;
    padding-top: 100%;
}

诀窍是，填充顶部是根据宽度计算的，因此您可以使用它使高度等于宽度
是的。。。你的更好回答得很好。不过这有两个小问题，因为这是一个有点粗糙的解决方案。当有一个单位数字时，形状看起来不像一个完整的圆。我的第二个担忧是，因为我用它作为通知区域，圆圈变得太大，不能超过2位数字。显然是因为
填充：5px
以及我们试图保持圆形。如果我们能为小尺寸优化它会更好。@xperator I添加了
行高：1
这可能可以解决取整问题。对于框的大小，一种可能的方法是减少不同类别的较大数字的
填充
和
字体大小