Горизонтальное размещение метки формы и ввода на одной линии

В веб-разработке эстетика форм имеет решающее значение для взаимодействия с пользователем. Расположение меток и полей ввода на одной строке может улучшить читаемость и удобство использования формы. В этой статье рассказывается, как легко выровнять элемент ввода по его метке, независимо от его длины.

Первоначальные попытки

Распространенный подход к выравниванию метки и ввода на одном line включает установку ширины ввода на auto. Однако это часто приводит к фиксированной ширине ввода. Альтернативно можно использовать ширину: 100%; перемещает ввод на новую строку, создавая нежелательный макет.

Решение: использование элемента Span со скрытым переполнением

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

Оптимальное размещение с использованием display: table-cell

Другое подход использует display: table-cell для позиционирования метки и ввода в виде ячеек таблицы. Для этого необходимо, чтобы контейнер отображался в виде таблицы, а ширина метки устанавливалась для сохранения ее положения при настройке полей ввода для оптимизации интервалов.

Руководство по внедрению

Для первого решение, используйте такой HTML-код:

Label

И CSS:

label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}

Для второго решения:

HTML:

    Label
    

CSS:

.container {
    display: table;
    width: 100%
}
label {
    display: table-cell;
    width: 1px;
    white-space: nowrap
}
span {
    display: table-cell;
    padding: 0 0 0 5px
}
input {
    width: 100%
}

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