Как сделать чтобы <label> и <input> отображались на одной строке в HTML-форме?
- 2 года назадЯ создаю регистрационную форму для веб-сайта. Я хочу, чтобы каждый 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 - 2 года назадЛучше всего разделить 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;
} - 2 года назад
label {
display:flex;
}
label input {
margin-left:10px;
}
Ваш ответ: