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

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

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

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

5 ответов:

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

  • дать метками 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

154

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

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

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

обновленный скрипку

12

Я использую что-то вроде этого:

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

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

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

.

[Как a side-note: я использую 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>
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>
3