我想在圆圈内显示通知计数,但我不希望它具有固定的宽度,因此当圆圈内有更大的数字/文本时,圆圈可以展开.
.circle {
height: 20px;
width: 20px;
line-height: 20px;
border-radius: 50%;
background-color: red;
color: white;
text-align: center;
}5
102
请参阅此仅CSS解决方案.设置相同的值min-width和min-height1位数字.使用伪元素进行垂直对齐并保持方形.有了border-radius适用于该圆的容器.
.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;
}8
64
512
4096
京公网安备 11010802040832号 | 京ICP备19059560号-6 