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

  • MAX1 год назад
    Я создаю регистрационную форму для веб-сайта. Я хочу, чтобы каждый 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 Name1 год назад
    Лучше всего разделить 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;
    }
  • Алексей11 месяцев назад
    label {
    display:flex;
    }

    label input {
    margin-left:10px;
    }
Ваш ответ:
  • bold
  • italic
  • underline
  • strike
  • Add link
  • Add image
  • Blockquote
  • Align left
  • Align center
  • Align right
  • Code
×
Используя сайт, вы подтверждаете, что вы прочитали и поняли политику о куки, политику конфиденциальности и наше пользовательское соглашение.