創建相同大小的按鈕

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其中儘可能你失去使用外部樣式表的一致性和性能優勢：毫升）。