Form не задается по нужному размеру (мне нужно подстроить под кнопку). Почему?

Question

[lenxs]

Хотя все параметры заданы через CSS. lenxs.beget.tech.

Comments

[Ankhena]

Уточните, что подо что не подстраивается?
Сейчас у вас ширина кнопки равна ширине формы.
А у инпутов ширина не задана и они отображаются с шириной по умолчанию.

Кстати, форме не нужен вертикальный флекс для такого расположения элементов внутри нее.

[lUser L]

form input {
width: 100%;
}

???

[lenxs]

Ankhena, нужно инпутам конкретно задать? Мне нужно, чтобы формы(инпуты) были одного размера с кнопкой, как здесь

[Ankhena]

lenxs, Уберите у формы флекс и задайте инпутам ширину 100%.
Сначала задайте им классы, например, form__input
и потом
.form__input {width: 100%}

[Ankhena]

lenxs, и не задавайте повторно инпутам шрифт, используйте font-family: inherit. Можно не только для family.
Жить будет проще.

[lenxs]

Ankhena, спасибо, разобралась)

Answer 1

[lenxs]

<section id="mail" class="mail">
		<div id="container" class="container">
			<h2 class="section-title">Форма заказа билета в будудщее
		</h2>
		<form action="#" class="form">
			<input type="text" name="name" placeholder="Имя" required>
			<input type="email" name="e-mail" placeholder="E-mail">
			<input type="tel" name="number" placeholder="Телефон" required>
			<input type="text" name="where" placeholder="Куда я полечу в ближайшее время?">
		<button type="submit" class="btn btn-form">Двигаться к мечте!</button>

		</form>
		</div>
	</section>

.section-title {
	margin-bottom: 53px;
	text-align: center; 
}

.form {
display: flex;
flex-direction: column;
align-items: center;
max-width: 342px;
align-items: center;
margin: 0 auto;
}
.mail {
	background: #ecf3f8;
	padding-top: 100px;
	padding-bottom: 102px;
}


.input {
	border: 1px solid #bbbbbb;
    font-size: 15px;
    font-family: 'Ubuntu', sans-serif;
    height: 47px;
    padding-left: 20px;
    width: 100%;
    box-sizing: border-box;
}

.btn-form {
	border: 0;
cursor: pointer;
display: center;
width: 100%;
align-items: center;
margin-top: 12px; 
}

Comments

[Spartak (Web-StyleStudio)]

Вы не указали инпутам класс
В вашем случае это class="input"

[Spartak (Web-StyleStudio)]

<input class="input" type="text" name="name" placeholder="Имя" required>
      <input class="input" type="email" name="e-mail" placeholder="E-mail">
      <input class="input" type="tel" name="number" placeholder="Телефон" required>
      <input class="input" type="text" name="where" placeholder="Куда я полечу в ближайшее время?">

Answer 2

[Владимир Майструк]

У тебя у кнопки ширина 100% а у формы в пикселях попробуй к форме сделать в %