显示2位数字时删除椭圆形边框半径

Question

当我必须显示一个从1到9的数字时，我试图设置一个完美的圆并设法做到这一点，但是当显示两个数字时，它就会变得混乱。 我似乎找不到办法。

这是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附近的边界半径如何弄乱并变成椭圆形:(

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

Answer 1

您需要定义高度和宽度，请尝试以下操作：

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;
}

Answer 2

您将必须设置高度和宽度：

span{
    float: left;
    font-size: 10px;
    position: relative;
    border: 1px solid #000;
    border-radius: 50%;
    margin: 10px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
}

http://jsfiddle.net/aKmF6/22/