Как сделать чтобы <label> и <input> отображались на одной строке в HTML-форме?

MAX3 года назад

Я создаю регистрационную форму для веб-сайта. Я хочу, чтобы каждый label и соответствующий поле ввода отображались в одной строке.

Вот мой код:

<div id="form">
	<label for="Student"> Имя: </label>
	<input name="Student" />
	<label for="Number"> Номер зачетной книжки: </label>
	<input name="Number" />
	<label for="Email"> Email: </label>
	<input name="Email" />
	<label for="User"> Пользователь: </label>
	<input name="User" />
	<label for="Pass"> Пароль: </label>
	<input name="Pass" type="password" />
</div>

#form {
 width: 400px;
 height: 550px;
 background-color: #fff;
 margin-right: auto;
 margin-left: auto;
 margin-top: 0px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 padding: 0px;
}

label {
 font-size: 16px;
 color: #333;
 height: 40px;
 width: 200px;
 margin-top: 10px;
 margin-left: 10px;
 text-align: right;
 clear: both;
}

input {
 height: 20px;
 width: 300px;
 border: 1px solid #000;
 margin-top: 10px;
 float: left;
}

Ответов: 2

No Name3 года назад

Лучше всего разделить label и input отдельными div. Также при сжатии размера окна, input должен переносится под label, для просмотра на мобильных устройствах.

Я предпочитаю такой метод решения вопроса:

<div class="row">
	<div class="left-column"><label for="student">Имя:</label></div>
	<div class="right-column"><input name="student" id="student"></div>
</div>
<div class="row">
	<div class="left-column"><label for="number">Номер зачетной книжки</label></div>
	<div class="right-column"><input name="number" id="number"></div>
</div>
<div class="row">
	<div class="left-column"><label for="user">Пользователь</label></div>
	<div class="right-column"><input name="user" id="user"></div>
</div>

.row {
	margin: 40px 0;
}

.left-column {
	display: inline-block;
	width: 250px;
}

.right-column {
	display: inline-block;
}

Алексей3 года назад

label {
   display:flex;
}

label input {
   margin-left:10px;
}

Ваш ответ: