输入元素正下方的 CSS 标签文本

Question

我有

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

试图获得：

[输入框1][输入框2]
      标签 1 标签 2

等等，包含所有元素。

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

可以改进，但我发现它比无关的

div

更干净，并且当缺少 CSS 支持时，它比

label

-after-

input

方法降级得更好。就个人而言，我更喜欢将

input

嵌套在

label

中。

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

Answer 3

通过将每个字段（在本例中为每个输入/标签对）包装在 div 中，可以使工作变得更加容易。

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