Выровнять метки в форме рядом с вводом

У меня есть очень простой и известный сценарий формы, где мне нужно правильно выравнивать метки рядом с входами. Однако я не знаю, как это сделать.

Моя цель состояла бы в том, чтобы метки выравнивались рядом с входами в правую сторону. Вот пример изображения желаемого результата.

Я сделал скрипку для вашего удобства и уточнил, что у меня есть сейчас - http://jsfiddle.net/WX58z/

Отрывок:

<div class="block">
    <label>Simple label</label>
    <input type="text" />
</div>
<div class="block">
    <label>Label with more text</label>
    <input type="text" />
</div>
<div class="block">
    <label>Short</label>
    <input type="text" />
</div>

Ответ 1

Одно из возможных решений:

Дайте метки display: inline-block;
Дайте им фиксированную ширину
Выровнять текст вправо

То есть:

label {
  display: inline-block;
  width: 140px;
  text-align: right;
}

<div class="block">
    <label>Simple label</label>
    <input type="text" />
</div>
<div class="block">
    <label>Label with more text</label>
    <input type="text" />
</div>
<div class="block">
    <label>Short</label>
    <input type="text" />
</div>

Ответ 2

В то время как решения здесь работоспособны, последние технологии сделали то, что я считаю лучшим решением. CSS Grid Layout позволяет нам структурировать более элегантное решение.

В приведенном ниже CSS представлена структура с двумя столбцами "настройки", где первый столбец должен быть выровненным по правому краю ярлыком, за которым следует некоторое содержимое во втором столбце. Более сложный контент может быть представлен во втором столбце, обернув его в <div>.

[Как примечание: я использую CSS, чтобы добавить ':', который следует за каждой меткой, так как это стилистический элемент - мои предпочтения.]

/* CSS */

div.settings {
    display:grid;
    grid-template-columns: max-content max-content;
    grid-gap:5px;
}
div.settings label       { text-align:right; }
div.settings label:after { content: ":"; }

<!-- HTML -->

<div class="settings">
    <label>Label #1</label>
    <input type="text" />

    <label>Long Label #2</label>
    <span>Display content</span>

    <label>Label #3</label>
    <input type="text" />
</div>

Ответ 3

Ответ на такой вопрос, как раньше, вы можете посмотреть здесь:

Создание формы для размещения полей и текста рядом друг с другом - каков семантический способ сделать это?

Итак, чтобы применить те же правила к вашей скрипке, вы можете использовать display:inline-block для отображения вашей метки и групп ввода рядом друг с другом, например:

CSS

input {
    margin-top: 5px;
    margin-bottom: 5px;
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    vertical-align:middle;
    margin-left:20px
}

label {
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    float: left;
    padding-top: 5px;
    text-align: right;
    width: 140px;
}

обновленная скрипка

Ответ 4

Я использую нечто похожее на это:

<div class="form-element">
  <label for="foo">Long Label</label>
  <input type="text" name="foo" id="foo" />
</div>

Стиль:

.form-element label {
    display: inline-block;
    width: 150px;
}

Ответ 5

Вы также можете попробовать использовать flex-box

<head><style>
body {
    color:white;
    font-family:arial;
    font-size:1.2em;
}
form {
    margin:0 auto;
    padding:20px;
    background:#444;
}
.input-group {
    margin-top:10px;
    width:60%;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
label, input {
    flex-basis:100px;
}
</style></head>
<body>

<form>
    <div class="wrapper">
        <div class="input-group">
            <label for="user_name">name:</label>
            <input type="text" id="user_name">
        </div>
        <div class="input-group">
            <label for="user_pass">Password:</label>
            <input type="password" id="user_pass">
        </div>
    </div>
</form>

</body>
</html>

Ответ 6

Я знаю, что это старый поток, но более простым решением было бы встроить ввод в метку следующим образом:

<label>Label one: <input id="input1" type="text"></label>

Ответ 7

Вот общая ширина меток для всех меток формы. Ничто не фиксирует ширину.

вызовите калькулятор setLabelWidth со всеми метками. Эта функция загрузит все метки в пользовательском интерфейсе и определит максимальную ширину метки. Примените возвращаемое значение функции ниже ко всем меткам.

     this.setLabelWidth = function (labels) {
            var d = labels.join('<br>'),
                dummyelm = jQuery("#lblWidthCalcHolder"),
                width;
            dummyelm.empty().html(d);
            width = Math.ceil(dummyelm[0].getBoundingClientRect().width);
            width = width > 0 ? width + 5: width;
            //this.resetLabels(); //to reset labels.
            var element = angular.element("#lblWidthCalcHolder")[0];
            element.style.visibility = "hidden";
            //Removing all the lables from the element as width is calculated and the element is hidden
            element.innerHTML = "";
            return {
                width: width,
                validWidth: width !== 0
            };

        };

Ответ 8

Вы можете сделать что-то вроде этого:

HTML:

<div class='div'>
<label>Something</label>
<input type='text' class='input'/>
<div>

CSS:

.div{
      margin-bottom: 10px;
      display: grid;
      grid-template-columns: 1fr 4fr;
}

.input{
       width: 50%;
}

Надеюсь, это поможет! :)