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

只需在按钮CSS中添加width属性即可。

例如：

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

Answer 2

在CSS中设置width属性

像这样：

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

Answer 3

这里有几个选项。设置常量width可能就是其中之一。您也可以尝试display: block，这将使按钮填充其父节点的整个宽度。

Answer 4

为您的按钮定义一些标准的“width”，例如：

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

我也创造了一个小提琴来引用： http://jsfiddle.net/aasthatuteja/vChFX/

希望这有帮助！

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

4 个答案: