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>

试图获得：

[input box 1]    [input box 2]
      label 1          label 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 - 后{ - 1}}方法更好。就个人而言，无论如何，我更喜欢将input嵌套在input中。

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

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

4 个答案: