创建相同大小的按钮

Question

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

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

Answer 1

创建一个样式类，并在这两个按钮，可以使用它。

.clsButton { 
    //Put your style declaration here 
} 

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

Answer 2

您可以使用CSS flexbox来实现此行为。

检查下面的例子：

form { 
 
    display: flex; 
 
} 
 
input, 
 
button { 
 
    flex: 1; 
 
}

<form> 
 

 
    <button>small button</button> 
 

 
    <button>this is the bigger button</button> 
 

 
</form> 
 

 
<form> 
 

 
    <input type="button" value="small button"> 
 

 
    <input type="button" value="this is the bigger button"> 
 

 
</form>

Answer 3

使用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（无需编辑您的ht一般应避免

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

数1其中尽可能你失去使用外部样式表的一致性和性能优势：毫升）。