我想把一个数字围成一个圆,就像下图所示:

这可能吗?它是如何实现的?


当前回答

三十点的答案是对的,但少了一点。你需要添加位置:相对,如果你想在圆中有居中值,还包括不同范围的数字。 例如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> .

其他回答

这是我的方法,用平方法。优点是它适用于不同的值,但你需要两个跨度。

.circle { display: inline-block; border: 1px solid black; border-radius: 50%; position: relative; padding: 5px; } .circle::after { content: ''; display: block; padding-bottom: 100%; height: 0; opacity: 0; } .num { position: absolute; top: 50%; transform: translateY(-50%); } .width_holder { display: block; height: 0; overflow: hidden; } <div class="circle"> <span class="width_holder">1</span> <span class="num">1</span> </div> <div class="circle"> <span class="width_holder">11</span> <span class="num">11</span> </div> <div class="circle"> <span class="width_holder">11111</span> <span class="num">11111</span> </div> <div class="circle"> <span class="width_holder">11111111</span> <span class="num">11111111</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;
  }

使用段落标签来书写文本。希望这能有所帮助

虽然迟到了,但这里有一个对我有效的自助解决方案。我使用Bootstrap 4:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> 身体< > <div class="行mt-4"> < div class = " col-md-12”> <span class="bg-dark text-white round -circle px-3 py-1 mx-2 h3">1</span> <span class="bg-dark text-white round -circle px-3 py-1 mx-2 h3">2</span> <span class="bg-dark text-white round -circle px-3 py-1 mx-2 h3">3</span> < / div > < / div > 身体< / >

基本上,您将bg-dark text-white圆圆px-3 py-1 mx-2 h3类添加到<span>(或其他)元素中,就完成了。

请注意,如果内容有多个数字,则可能需要调整边距和填充类。

对于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 > 身体< / >