Совместите метки в форме рядом с вводом

136

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

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

введите описание изображения здесь

Я сделал скрипку для вашего удобства и уточнить, что у меня сейчас - 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>

Развернуть фрагмент

html css alignment

— Стан
источник

190

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

Дать ярлыки 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>

Развернуть фрагмент

JSFiddle

— bfavaretto
источник

4

Как мне сделать это, если некоторые из ярлыков являются флажками или переключателями? Метки для этих элементов имеют одинаковую фиксированную ширину с метками текстового поля, что нежелательно. Есть ли способ сделать это без фиксированной ширины на этикетке?

— Ребекка Мериц

@RebeccaMeritz Вы имеете в виду, когда у разметки сначала стоит флажок, а после - ярлык? Вы можете добавить класс к обоим, и стилизовать их отдельно. Возможно, вам следует задать новый вопрос об этом.

— bfavaretto

2

Как сделать это отзывчивым? И как справиться с i18n? Я имею в виду, что текстовые метки имеют разную длину на разных языках, поэтому я боюсь, что установка фиксированной ширины не будет работать, если текст длинный.

— Азимут

@Azimuth В настоящее время вы можете использовать CSS-сетку.

— bfavaretto

1

это маркировка фиксированной ширины, она должна быть динамической, исходя из максимальной ширины метки.

— Самяк Джайн

27

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

Приведенный ниже CSS предоставляет структуру «настройки» из 2 столбцов, где первый столбец должен быть выровненным по правому краю ярлыком, за которым следует некоторое содержимое во втором столбце. Более сложный контент может быть представлен во втором столбце, обернув его в <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>

Развернуть фрагмент

— Дэвид Резерфорд
источник

1

Эй, можешь добавить скрипку, пожалуйста?

— Стэн

Да, я обновил ответ, чтобы использовать фрагменты.

— Дэвид Резерфорд

С какой версией и платформой Chrome у вас проблемы?

— Дэвид Резерфорд

1

Оптимальное решение!

— Филипп Михальский

Потрясающие! Если вы замените приведенное выше определение столбцов на grid-template-columns: max-content 1fr;, второй столбец будет использовать всю оставшуюся ширину. Для меня это святой Грааль таких макетов, где не нужно указывать ширину столбцов или содержимого, и все автоматически вписывается в доступное пространство.

— Джефф-ч

12

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

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

Таким образом, чтобы применить те же правила к скрипке, вы можете использовать ее 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;
}

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

— Андрес Ильич
источник

Это очень хорошее решение, за исключением того, что вы должны жестко задавать ширину надписей. Если новый ярлык слишком длинный - макет ломается. Похоже, должно быть более надежное решение?

— mattstuehler

8

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

<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;
}

— Майк Г
источник

4

Вы также можете попробовать использовать 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>

— user6797117
источник

Это мило, но совсем не то, что он просил. Смотрите картинку в op

— phorgan1

3

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

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

Развернуть фрагмент

— Роберт
источник

Я искал решение для этого (включая ввод внутри метки), но с выровненным текстом

— Natim

0

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

вызовите калькулятор 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
            };

        };

— Самяк Джайн
источник

0

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

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%;
}

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

— Rakonjac
источник