当显示2位数字时，删除椭圆形边界半径 [英] Remove oval border-radius when 2 digit numbers show up

问题描述

我想设置一个完美的圆圈，并设法做，当我必须显示从1到9的数字，但它显示了两个数字时搞乱了。

$ b

这里是html：

 < span> 8< / span> 
< span> 9< / span> 
< span> 10< / span> 
  

CSS：

  span {
 float：left; 
 font-size：10px; 
 position：relative; 
 border：1px solid＃000; 
 border-radius：50％; 
 padding：5px 10px; 
 margin：5px; 
} 
  

看看边界半径大约为10的距离变成椭圆形： / p>

示例： http://jsfiddle.net/aKmF6/ 21 /

解决方案

您需要定义高度和宽度，请尝试：

  span {
 font-size：10px; 
 position：relative; 
 border：1px solid＃000; 
 border-radius：50％; 
 width：20px; 
 height：20px; 
 display：inline-block; 
 text-align：center; 
 line- height：20px; 
} 
  

I'm trying to set a perfect circle and manage to do that when I have to show the numbers from 1 to 9 but it gets messed up when two digits are shown. I can't seem to figure a way out.

Here's the html:

<span>8</span>
<span>9</span>
<span>10</span>

The CSS:

span{
    float: left;
    font-size: 10px;
    position: relative;
    border: 1px solid #000;
    border-radius: 50%;
    padding:5px 10px;
    margin: 5px;
}

See how the border radius around 10 messes up and becomes an oval :(

Example: http://jsfiddle.net/aKmF6/21/

解决方案

You need to define height and width, try this:

span {
font-size: 10px;
position: relative;
border: 1px solid #000;
border-radius: 50%;
width: 20px;
height: 20px;
display: inline-block;
text-align: center;
line-height: 20px;
}

这篇关于当显示2位数字时，删除椭圆形边界半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！