我想把一个数字围成一个圆,就像下图所示:
这可能吗?它是如何实现的?
我想把一个数字围成一个圆,就像下图所示:
这可能吗?它是如何实现的?
当前回答
最简单的方法是使用bootstrap和badge类
<span class="badge">1</span>
其他回答
下面是JSFiddle的演示和代码片段:
.numberCircle { 这个特性:50%; 宽度:36 px; 高度:36 px; 填充:8 px; 背景:# fff; 边框:2px实体#666; 颜色:# 666; text-align:中心; 字体:32px Arial, sans-serif; } < div class = " numberCircle " > < / div > 30
我的答案是一个很好的起点,其他一些答案为不同的情况提供了灵活性。如果你关心IE8,看看我回答的旧版本。
对于0到99的数字来说,这样做是可行的:
.circle { 边框:0.1em纯灰色; 这个特性:100%; 高度:2 em; 宽:2 em; text-align:中心; } .circle p { margin-top: 0.10 em; 字体大小:1.5 em; 粗细:大胆的; 字体类型:无衬线; 颜色:灰色; } 身体< > < div class = "圆" > < p > < / p > 30 < / div > 身体< / >
改进第一个答案,只需去除填充,并添加line-height和vertical-align:
.numberCircle {
border-radius: 50%;
width: 36px;
height: 36px;
line-height: 36px;
vertical-align:middle;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
对于根据内容变化的圆圈大小,这应该是有效的:
.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; } <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>
它依赖于内容的宽度加上margin- s来确定半径,然后使用padding- s扩展高度以匹配。margin-'s需要根据字体大小进行调整。
更新以删除内部元素:
.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; } <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>
使用伪元素强制高度。垂直对齐需要零宽度空间。将line-height:0px从外层移到伪层,这样在IE8降级时至少是可见的。
.numberCircle { 这个特性:50%; 宽度:40像素; 高度:40像素; 显示:块; 浮:左; 边框:2px实体#000000; 颜色:# 000000; text-align:中心; margin-right: 5 px; } <h3><span class="numberCircle">1</span> Regiones del Interior</h3>