按键大小与数字

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>