顯示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/