Html 用CSS制作完美的圆形div

正如你所看到的，我有两个div。每个div中都有不同的文本。两个div的样式相同，但是id

days

的div是完美的圆形，而id

hour

的div则像一个椭圆形。我如何使

小时也循环

这是我的密码：


.component{
颜色：白色；
边框：1px纯白；
边界半径：50%；
显示：内联；
填充：20px；
}
身体{
背景色：黑色；
利润率：20px；
}

71
5.
这对我来说是个好办法，但我不确定这是否是您要寻找的解决方案：

<div class="component" id="hour">&nbsp;5&nbsp;</div>

5
在这种情况下，您必须使用
固定宽度。与第二个div相比，第一个div具有更高的宽度，因为内容（71 vs 5）



.component{
颜色：白色；
边框：1px纯白；
边界半径：50%；
显示：内联块；
宽度：60px；
文本对齐：居中；
填充：20px0；
}
身体{
背景色：黑色；
利润率：20px；
}

71
5.

更新你的css到这个。干杯
请参见示例小提琴：
这是因为当您说以下内容时：

border-radius: 50%;

根据MDN文件（）的规定，“横轴的百分比指的是框的宽度”

因此，由于您以内联方式显示元素，因此.component元素的宽度正好是其内容的宽度。解决方案之一是显示内联块中的元素，并强制它们为正方形，以便应用“边界半径：50%”属性将使它们都成为完美的圆，而不管其内容的大小

以下是我建议的解决方案：

1） 显示.components元素内联块，以便我可以对其宽度和高度进行操作

2） 给他们一个宽度和高度正好是填充物的大小，这样他们就不会伸展太远

3） 应用文本对齐：居中以确保数字正确居中（第二个数字有问题）

下面是我建议的代码演示：


.component{
颜色：白色；
边框：1px纯白；
边界半径：50%；
显示：内联块；
填充：20px；
高度：20px；
宽度：20px；
文本对齐：居中；
}
身体{
背景色：黑色；
利润率：20px；
}

71
5.
效果很好，谢谢：）很好的解释！请添加修改代码的演示。
border-radius: 50%;