输入元素下方的CSS标签文本 [英] CSS label text right below input element

问题描述

我有输入文本和标签标签。我不知道CSS，以获得标签文本在输入文本正下方对齐。以下是HTML的片段：

I have input text's and label tags. 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:

<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

等等，包括所有元素。

etc, with all elements.

推荐答案

一个快速启动的示例工作原理：

A quickly whipped up example that works:

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

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

可以改进，但我觉得比外来更干净 div ，并且它比标签 -after- 输入当CSS支持不存在时。就个人而言，我更喜欢将输入嵌套在标签中。

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.

这篇关于输入元素下方的CSS标签文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！