thi*_*dot 413
.numberCircle {
border-radius: 50%;
width: 36px;
height: 36px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}<div class="numberCircle">30</div>要使其在IE8及更早版本中运行,您必须下载并使用CSS3 PIE.我上面的演示在IE8中不起作用,但这只是因为jsFiddle不能托管__CODE__.
- 添加`box-sizing:initial`后效果很好. (9认同)
- display:inline-block; (7认同)
- 为了避免在改变字体大小时在CSS中进行数学运算(例如,如果你正在进行响应式设计,这很麻烦),你可以使用thirtydot的jsfiddle的这种改编,它只使用像素来描述字体大小:http: //jsfiddle.net/dQR9T/7058/ (3认同)
Mik*_*ike 100
这里大多数其他答案的问题是你需要调整外部容器的大小,以便它是基于字体大小和要显示的字符数的完美大小.如果您要混合1位数字和4位数字,它将无法正常工作.如果字体大小和圆形大小之间的比例不完美,您最终会在大圆的顶部垂直对齐椭圆形或小数字.这适用于任何数量的文本和任何大小的圆圈.只需设置width和line-height相同的值:
.numberCircle {
width: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
font-size: 32px;
border: 2px solid #666;
}<div class="numberCircle">1</div>
<div class="numberCircle">100</div>
<div class="numberCircle">10000</div>
<div class="numberCircle">1000000</div>如果您需要更长或更短的内容,您需要做的就是调整容器的宽度以获得更好的贴合度.
- 这正是我遇到的问题，显示内部的百分比可能是“1”、“10”或“100”。这工作完美，谢谢！ (2认同)
小智 51
如果它是20或更低,你可以使用unicode字符①②...⑳
http://www.alanwood.net/unicode/enclosed_alphanumerics.html
- 一个好主意,但要注意,如果圆圈仅用于显示目的,则会破坏语义 (11认同)
rya*_*hza 41
对于根据内容而变化的圆圈尺寸,这应该有效:
<span class="numberCircle"><span>30</span></span>
<span class="numberCircle"><span>1</span></span>
<span class="numberCircle"><span>5435</span></span>
<span class="numberCircle"><span>2</span></span>
<span class="numberCircle"><span>100</span></span>
.numberCircle {
display:inline-block;
line-height:0px;
border-radius:50%;
border:2px solid;
font-size:32px;
}
.numberCircle span {
display:inline-block;
padding-top:50%;
padding-bottom:50%;
margin-left:8px;
margin-right:8px;
}
它依赖于内容的宽度加上margin-'s来确定半径,然后使用padding-'s 扩展高度以匹配.该margin-的需要基础上的字体大小进行调整.
更新删除内部元素:
<span class="numberCircle">30</span>
<span class="numberCircle">1</span>
<span class="numberCircle">5435</span>
<span class="numberCircle">2</span>
<span class="numberCircle">100</span>
<style type="text/css">
.numberCircle {
display:inline-block;
border-radius:50%;
border:2px solid;
font-size:32px;
}
.numberCircle:before,
.numberCircle:after {
content:'\200B';
display:inline-block;
line-height:0px;
padding-top:50%;
padding-bottom:50%;
}
.numberCircle:before {
padding-left:8px;
}
.numberCircle:after {
padding-right:8px;
}
</style>
使用伪元素强制高度.需要零宽度空间进行垂直对齐.移动line-height:0px从外部到伪,以便在降级IE8时至少可见.
- 对我来说,这是最好的解决方案.它允许更大的数字,并且是最具可扩展性的.所有其他解决方案都有太多硬编码的大小.这是最少的.字体大小可以改变相当大的数量而不会破坏它.如果大幅改变,需要调整保证金,但这是非常宽容的.必须使用嵌套元素有点负面. (5认同)
- 确实是最好的解决方案。我只是用 0.35em 而不是 8px 替换了 margin-left 和 margin-right 大小（更新解决方案中的填充）。这样您就可以更改数字字体大小并保持合适的边距。 (2认同)
小智 21
最简单的方法是使用bootstrap和徽章类
<span class="badge">1</span>
- 这很棒!我已经在使用bootstrap,我只是不知道这个类是否存在. (4认同)
Wol*_*ler 16
此版本不依赖于硬编码的,固定的值,但尺寸相对font-size的div.
CSS:
.numberCircle {
font: 32px Arial, sans-serif;
width: 2em;
height: 2em;
box-sizing: initial;
background: #fff;
border: 0.1em solid #666;
color: #666;
text-align: center;
border-radius: 50%;
line-height: 2em;
box-sizing: content-box;
}
HTML:
<div class="numberCircle">30</div>
<div class="numberCircle" style="font-size: 60px">1</div>
<div class="numberCircle" style="font-size: 12px">2</div>
- 嗨，这很好，但是如果数字很大，即使是 100 或 1000，它也会滚动出圆圈。另外，是否可以使用字体的大小来创建新的背景颜色 (2认同)
- 漂亮的解决方案！ (2认同)
你可以使用border-radius:
<html>
<head>
<style type="text/css">
.round
{
-moz-border-radius: 15px;
border-radius: 15px;
padding: 5px;
border: 1px solid #000;
}
</style>
</head>
<body>
<span class="round">30</span>
</body>
</html>
使用边框半径和填充值进行播放,直到您对结果满意为止.
但这不适用于所有浏览器.我猜IE仍然不支持圆角.
聚会迟到了，但这里有一个对我有用的仅引导解决方案。我正在使用 Bootstrap 4：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="row mt-4">
<div class="col-md-12">
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">1</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">2</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">3</span>
</div>
</div>
</body>您基本上将bg-dark text-white rounded-circle px-3 py-1 mx-2 h3类添加到您的<span>（或其他）元素中，然后就完成了。
请注意，如果您的内容超过一位数字，您可能需要调整边距和填充类。
我很惊讶没有人使用flex它更容易理解，所以我把我的答案版本放在这里：
- 要创建一个圆，请确保
width等于height - 为了适应
font-size圆圈中的数字，使用em而不是px - 要将数字居中，请使用 flex 和
justify-content: center; align-items: center; - 如果数量的增长（> 1000为例），增加
width和height在同时
下面是一个例子：
.circled-number {
color: #666;
border: 2px solid #666;
border-radius: 50%;
font-size: 1rem;
display: flex;
justify-content: center;
align-items: center;
width: 2em;
height: 2em;
}
.circled-number--big {
color: #666;
border: 2px solid #666;
border-radius: 50%;
font-size: 1rem;
display: flex;
justify-content: center;
align-items: center;
width: 4em;
height: 4em;
}<div class="circled-number">
30
</div>
<div class="circled-number--big">
3000000
</div>| 归档时间： |
|
| 查看次数： |
312307 次 |
| 最近记录： |