Создать кнопки одинакового размера

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 можно использовать 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 следует избегать, где это возможно, как вы потеряли последовательность и производительности преимущества использования внешней таблицы стилей.