Вирівняйте мітки за формою поруч із введенням

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

— Стен
джерело

189

Одне можливе рішення:

Дайте етикетки 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

— бфаваретто
джерело

4

Як зробити цю роботу, якщо на деяких ярликах є прапорці або радіо кнопки? Мітки для цих елементів закінчуються тією ж фіксованою шириною, що і мітки текстового поля, що не бажано. Чи можна це зробити без фіксованої ширини на етикетці?

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

@RebeccaMeritz Ви маєте на увазі, коли на розмітці з’являється прапорець спочатку, а мітка - згодом? Ви можете додати клас до обох і окремо накреслити їх. Можливо, вам слід задати нове запитання щодо цього.

— bfavaretto

2

Як зробити це чуйним? А як впоратися з i18n? Я маю на увазі, що текстові мітки мають різну довжину на різних мовах, тому я побоююся, що заповнення фіксованої ширини не спрацює, якщо текст довгий.

— Азимут

@Azimuth На сьогодні ви можете скористатися сіткою CSS.

— бфаваретто

1

це маркування фіксованої ширини, вона повинна бути динамічною, виходячи з максимальної ширини мітки.

— Самяк Джайн

27

Хоча рішення тут є працездатними, новітні технології зробили те, що, на мою думку, є кращим рішенням. 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>

Розгорніть фрагмент

— Девід Резерфорд
джерело

1

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

— Стен

Так, я оновив відповідь, щоб використати фрагменти.

— Девід Резерфорд

З якою версією та платформою Chrome у вас виникли проблеми?

— Девід Резерфорд

1

Оптимальне рішення! Зараз добре працює в Chrome 73.

— Philipp Michalski

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

— jeff-h

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

Ви також можете спробувати використовувати флекс-бокс

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

— користувач6797117
джерело

Це досить, але зовсім не те, що він просив. Дивіться малюнок у op

— phorgan1

3

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

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

Розгорніть фрагмент

— Роберт
джерело

Я шукав рішення для цього (

— включте

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

Сподіваюся, це допомагає! :)

— Раконяц
джерело