Текст метки CSS прямо под элементом ввода

У меня есть теги input и теги label. Я не могу понять CSS, чтобы текст ярлыка выравнивался прямо под текстом ввода. Вот фрагмент HTML:


<form id="sg1">
    <label for="member1">member 1</label>
    <input name="member1" id="member1" value="jack" />
    <label for="member2">member 2</label>
    <input name="member2" id="member2" value="carter" />
    <label for="member3">member 3</label>
    <input name="member3" id="member3" value="jackson" />
    <label for="member4">member 4</label>
    <input name="member4" id="member4" value="tielk" />    
</form>

Попытка получить:

[input box 1]    [input box 2]
      label 1          label 2

и т.д. со всеми элементами.

Ответ 1

Быстро взбитый пример, который работает:

input {
  display: inline-block;
  width: 6em;
  position: relative;
  top: -3em;
}

label {
  display: inline-block;
  width: 6em;
  margin-right: .5em;
  padding-top: 1.5em;
}

<form id="sg1">
  <label>member 1 <input name="member1" id="member1" value="jack" /></label>
  <label>member 2 <input name="member2" id="member2" value="carter" /></label>
  <label>member 3 <input name="member3" id="member3" value="jackson" /></label>
  <label>member 4 <input name="member4" id="member4" value="tielk" /></label>
</form>

Ответ 2

Используйте таблицу (одна пара ввода/метки на ячейку) или левые плавающие div (одна пара ввода/метки на div). Пример:

<div class="pair">
    <input type="text" name="foo" value="bar" /><br />
    <label for="foo">shabba</label>
</div>
<div class="pair">
    …
</div>

CSS

div.pair {
    float:left;
}

Ответ 3

Вы сделали бы работу намного проще, обернув каждое поле (в данном случае, каждую пару ввода/метки) в div.

Ответ 4

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

Самый простой способ - поместить метку под вкладкой на html:

<form id="sg1">
    <input name="member1" id="member1" value="jack" />
    <label for="member1">member 1</label>
    <input name="member2" id="member2" value="carter" />
    <label for="member2">member 2</label>
    <input name="member3" id="member3" value="jackson" />
    <label for="member3">member 3</label>
    <input name="member4" id="member4" value="tielk" />    
    <label for="member4">member 4</label>
</form>

Затем вы можете обернуть каждую пару ввода/метки с помощью div и установить div следующим образом:

<form id="sg1">
    <div class="wrap">
        <input name="member1" id="member1" value="jack" />
        <label for="member1">member 1</label>
    </div>
    <div class="wrap">
        <input name="member2" id="member2" value="carter" />
        <label for="member2">member 2</label>
    </div>
    <div class="wrap">
        <input name="member3" id="member3" value="jackson" />
        <label for="member3">member 3</label>
    </div>
    <div class="wrap">
        <input name="member4" id="member4" value="tielk" />    
        <label for="member4">member 4</label>
    </div>
</form>

#sg1 div
{
    clear: both;
    float: left;
}

Затем вы можете поместить

#sg1 label
{
    float: right;
}

input
{
    display:block;
}