html - 无论包含的文本如何，如何使按钮具有相同的大小？

Question

我有这个简单的布局:

<form>  
<div>  
<input class="buttonStyle" type="submit" name="action" value="Press this button to do Action A">  
</div>  
<div>  
<input class="buttonStyle" type="submit" name="action" value="Press this">  
</div>  
<div>  
<input class="buttonStyle" type="submit" name="action" value="Press!">  
</div>  
</form>  

我使用这种简单的样式，以便按钮很大并且它们之间有一些空间:

.buttonStyle {  
    margin-bottom: 10px;      
    border: none;  
    cursor: pointer;  
    font-size: 20px;  
    border-radius: 5px;      
}  

我遇到的问题是按钮的大小不一样(因为看起来按钮的大小与文本的大小相同)并且形成一个比例(即大、短、短)。
无论包含的文本如何，如何使按钮具有相同的大小？

Answer 1

只需将 width 属性添加到按钮 CSS。

例如:

.buttonStyle {
    //...
    width: 100px;
}