按鍵大小與數字

Question

我有一個問題，我的環形按鈕的寬度。 在此截圖中：http://prntscr.com/auzfa5，您可以看到前9個按鈕（1-9）的寬度比其他按鈕的寬度小。

基本上，我希望所有的按鈕具有相同的寬度，無論輸入什麼數字。但我不完全知道如何？

我使用Bootstrap來設計我的按鈕。 這裏是CSS代碼，我用：

button { 
    border-radius: 15%; 
    padding: 16px; 
    font-size: 16px; 
    color: #FFF8DC; 
    margin: 4px; 
} 

簡單地說：我希望所有的按鈕具有相同的寬度。

如果您需要其他東西，請在評論部分提問，我會盡快回復。

Answer 1

查看當前您的按鈕寬度是根據1-9的文本，文本是單個字母，但9個文本後是2個字母，所以如果您使用填充將是這樣。

將寬度應用於您的按鈕並使用text-align:center居中對齊並移除leftright填充。

button { 
    border-radius: 15%; 
    padding: 16px 0; 
    width: 60px; // according to u 
    font-size: 16px; 
    color: #FFF8DC; 
    margin: 4px; 
    text-align: center; 
} 

Answer 2

只需將相同的width應用於按鈕。

button { 
 
    border-radius: 15%; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    color: #FFF8DC; 
 
    margin: 4px; 
 
    background-color: green; 
 
    width: 80px; 
 
}

<button>1</button> 
 
<br/> 
 
<button>100</button>