1

我有这个简单的布局： 

<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;      
}

我遇到的问题是按钮的大小不同（因为按钮的大小似乎与文本的大小相同）并形成比例（即大、短、短）。
无论包含的文本如何，如何使按钮具有相同的大小？

4

4 回答 4

1

width只需向按钮 CSS添加一个属性。

例如：

.buttonStyle {
    //...
    width: 100px;
}
于 2013-10-18T18:18:33.993 回答
1

width在你的 CSS 中设置一个属性

像这样：

.buttonStyle {  
    margin-bottom: 10px;      
    border: none;  
    cursor: pointer;  
    font-size: 20px;  
    border-radius: 5px;
    width: 200px;      
}
于 2013-10-18T18:19:48.047 回答
0

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

于 2013-10-18T18:24:57.290 回答
0

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

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

我也创建了一个小提琴来参考：http: //jsfiddle.net/aasthatuteja/vChFX/

希望这可以帮助！

于 2013-10-18T18:25:31.283 回答