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

CSS label text right below input element

提问by ina

I have inputtext's and labeltags. I can't figure out the CSS to get the label text to align right below the input text. Here's a snippet of the HTML:

我有input文字和label标签。我无法弄清楚使标签文本在输入文本正下方对齐的 CSS。这是 HTML 的一个片段：

<form id="sg1">
    <label for="member1">member 1</label>
    <input name="member1" id="member1" value="Hyman" />
    <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="Hymanson" />
    <label for="member4">member 4</label>
    <input name="member4" id="member4" value="tielk" />    
</form>?

Trying to get:

试图获得：

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

etc, with all elements.

等等，所有元素。

回答by You

A quickly whipped up example that works:

一个快速启动的有效示例：

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="Hyman" /></label>
  <label>member 2 <input name="member2" id="member2" value="carter" /></label>
  <label>member 3 <input name="member3" id="member3" value="Hymanson" /></label>
  <label>member 4 <input name="member4" id="member4" value="tielk" /></label>
</form>?

Could be improved, but I find it cleaner than extraneous divs, and it degrades much nicer than the label-after-input-approach when CSS support is absent. Personally, I prefer to nest the inputs in the labels anyway.

可以改进，但我发现它比无关的divs更干净，并且当缺少 CSS 支持时，它比label-after-input方法降级得更好。就个人而言，我更喜欢将inputs嵌套在s 中label。

回答by scy

Use a table (one input/label pair per cell) or left-floating divs (one input/label pair per div). Example:

使用表格（每个单元格一个输入/标签对）或左浮动 div（每个 div 一个输入/标签对）。例子：

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

CSS:

CSS：

div.pair {
    float:left;
}

回答by Thom Smith

You'd make the job a lot easier by wrapping each field (in this case, each input/label pair) in a div.

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

回答by Razor Storm

You canuse pure css to get this to achieve what you want, but it requires a lot of adhoc positioning stuff that you're better off not doing.

你可以使用纯 css 来实现你想要的，但它需要很多临时定位的东西，你最好不要这样做。

The simplest way is to put the label beneath the input on the html:

最简单的方法是将标签放在 html 的输入下方：

<form id="sg1">
    <input name="member1" id="member1" value="Hyman" />
    <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="Hymanson" />
    <label for="member3">member 3</label>
    <input name="member4" id="member4" value="tielk" />    
    <label for="member4">member 4</label>
</form>

Then you can wrap each input/label pair with a div, and set the div like so:

然后你可以用一个 div 包裹每个输入/标签对，并像这样设置 div：

<form id="sg1">
    <div class="wrap">
        <input name="member1" id="member1" value="Hyman" />
        <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="Hymanson" />
        <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;
}

Next you can put

接下来你可以放

#sg1 label
{
    float: right;
}

input
{
    display:block;
}