如何做一個完整的圓?裡面顯示數字

clipboard.png

數字有個位數到百位數

padding:10px;
    background-color:#F00;
    color:#fff;
    border-radius:50%;
<span class="alert">9</span>
<span class="alert">999</span>

如何讓它保持正圓的同時
當有數字時不變形? 個位數和百位數

阅读 5.1k
3 个回答

网上找了个

<div class="circle">
 <span>999999</span>
</div>
.circle {
  display: inline-block;
  text-align: center;
  line-height: 1;
  background-color: red;
  border-radius:50%;
  font-size: 14px;
}

.circle span {
  display: block;
  padding: 50%;
  margin: -2em -50% 0;
  position: relative;
  top: 1em;
  border: 0.5em solid transparent;
  white-space: nowrap;
}

http://jsfiddle.net/zcd75Lcd/

你要行把span设置为block 设置个宽高像下面的样式

width: 30px;
height: 30px;
background-color: #F00;
color: #fff;
border-radius: 50%;
display: block;
text-align: center;
line-height: 30px;

border-radius:xxx  宽度是 元素的长度的一半
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题