Как расположить лейблы левее инпутов и чтоб они были друг под другом?

Question

Не понимаю как расположить сначала лейблы строго друг под другом, а затем сделать левее инпутов...Вот что смог сам:

<form action="" align=center>
    <fieldset>
        <legend>Обратная связь</legend>
        <div class="container">
            <div class="labels">
                <label for="name">Введите имя:</label>
                <label for="name">Email:</label>
                <label for="name">Дата:</label>
            </div>
            <div class="inputs">
                <input type="text" size="30" placeholder="Ваше имя"><br>
                <input type="email" id="email" pattern="[email protected]" size="30" required><br>
                <input type="date"><br>
            </div>
        </div>
        <label>Качество обслуживания: <input type="range" min=1 max=5 step=1></label><br>
        <label for="story">Описание:</label><br>
        <textarea id="story" name="story" rows="5" cols="33"></textarea><br>
        <p>Порекомендуете наш магазин?</p>
        <p><input name="recommend" type="radio" value="yes">Да</p>
        <p><input name="recommend" type="radio" value="no" checked>Нет</p>
        <input type="submit" value="Отправить">
        <input type="reset" value="Сбросить">

    </fieldset>
    <h1>Как нас найти?</h1>
    <iframe src="https://www.google.com/maps/d/u/0/embed?mid=1sP5gzvTLg2CMqMZyOLqSnatetMjWFchH" width="640" height="480" align="center"></iframe>

</form>

Answer 1

Если вам принципиально нужно сохранить два столбца, то можно воспользоваться display:flex;

/* Выставляем .labels и .inputs столбцами */
.container {
    display: flex;
    justify-content: center;
}

/* Чуть-чуть выравниваем строки*/
.labels > label, .inputs > input {
    display: block;
    line-height: 200%;
}

<form action="" align=center>
    <fieldset>
        <legend>Обратная связь</legend>
        <div class="container">
            <div class="labels">
                <label for="name">Введите имя:</label>
                <label for="email">Email:</label>
                <label for="date">Дата:</label>
            </div>
            <div class="inputs">
                <input id="name" type="text" size="30" placeholder="Ваше имя">
                <input id="email" type="email" pattern="[email protected]" size="30" required>
                <input id="date" type="date">
            </div>
        </div>
    </fieldset>
</form>

В ином случае, есть смысл обернуть каждый input в соответсвующий label. В таком случае не придётся использовать for и назначать каждому input свой id

/* Выставляем все label друг под другом */
label {
  display:block;
}

/* Чуть-чуть выравниваем заголовки и input'ы */
label > span{
  display:inline-block;
  width: 170px;
}

label > input{
  display:inline-block;
  width: 170px;
}

<form action="" align=center>
    <fieldset>
        <legend>Обратная связь</legend>
        <div class="container">
            <label>
              <span>Введите имя:</span>
              <input type="text" size="30" placeholder="Ваше имя">
            </label>
            <label>
              <span>Email:</span>
              <input type="email" pattern="[email protected]" size="30" required>
            </label>
            <label>
              <span>Дата:</span>
              <input type="date">
            </label>
        </div>
    </fieldset>
</form>

БЛОГ НА HUSL

Как расположить лейблы левее инпутов и чтоб они были друг под другом?

Ответы (1 шт):