我想把一个数字围成一个圆,就像下图所示:
这可能吗?它是如何实现的?
我想把一个数字围成一个圆,就像下图所示:
这可能吗?它是如何实现的?
当前回答
三十点的答案是对的,但少了一点。你需要添加位置:相对,如果你想在圆中有居中值,还包括不同范围的数字。 例如123;
HTML:
< div级30 =“numberCircle > < / div >
CSS:
.numberCircle {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 8px;
position: relative;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
但最简单的解决方案是使用Bootstrap
<span class="badge" style ="float:right">123</span> .
其他回答
你用一个标准的方块,那是一个正方形
这是css3的特性,它不是很受支持,你可以依靠firefox和safari。
.circle { 宽度:10 em; 高度:10 em; -webkit-border-radius: 5 em; -moz-border-radius: 5 em; 边框:1px纯黑色; } < div class = "圆" > < span > 1234 < / span > < / div >
你可以使用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仍然不支持圆角。
在css中做这样的事情吗
div { width: 10em; height: 10em; -webkit-border-radius: 5em; -moz-border-radius: 5em; } p { text-align: center; margin-top: 4.5em; }
使用段落标签来书写文本。希望这能有所帮助
改进第一个答案,只需去除填充,并添加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;
}
虽然迟到了,但下面是我用https://codepen.io/jnbruno/pen/vNpPpW给出的解决方案
不需要额外的工作。 谢谢约翰·诺埃尔·布鲁诺
.btn-circle.btn-xl { width: 70px; height: 70px; padding: 10px 16px; border-radius: 35px; font-size: 24px; line-height: 1.33; } .btn-circle { width: 30px; height: 30px; padding: 6px 0px; border-radius: 15px; text-align: center; font-size: 12px; line-height: 1.42857; } <div class="panel-body"> <h4>Normal Circle Buttons</h4> <button type="button" class="btn btn-default btn-circle"> <i class="fa fa-check"></i> </button> <button type="button" class="btn btn-primary btn-circle"> <i class="fa fa-list"></i> </button> </div>