创建相同大小的按钮

Question

下面的代码以html格式创建两个不同大小的按钮.如何使这些按钮大小相同？

<form>
<input type="button" value="btn"">
<input type="button" value="superLongButon"">
</form>

Answer 1

使用CSS控制页面上按钮的宽度.

至少有3种方法可以实现您的目标.

1. 内联CSS:

<form>
    <input type="button" style="width:200px;" value="btn"">
    <input type="button" style="width:200px;" value="superLongButon"">
</form>

2. 添加HTML类并为该类创建CSS规则:

<form>
    <input type="button" class="frmBtn" value="btn"">
    <input type="button" class="frmBtn" value="superLongButon"">
</form>   

然后在CSS文件中添加:

.frmBtn {
    width:200px
} 

3. 仅限CSS(无需编辑您的html):

form input[type='button'] {
    display:inline-block;
    width:200px; //or as wide as you want them to be
}

通常应尽可能避免使用外部样式表的一致性和性能优势.