在输入字段旁边的两行上输入标签答案

【问题标题】：Input label on two lines next to input field在输入字段旁边的两行上输入标签
【发布时间】：2011-06-28 11:09:04
【问题描述】：

我想要一个与输入字段相关联的标签。一些标签需要不止一行。但是，我无法查看文本。我想要实现的目标如下所示：

标签 1 <input />
标签 1 的子文本

我目前的代码如下：

<div class="row">
<label for="height">Height (help text here)</label>
<input name="height" id="height" ... />
</div>

CSS：

form { width: 100%; overflow: hidden; margin-top: -20px;}

form .row { height: 100%; overflow: hidden; padding-left: 140px; width: 295px; line-height: 30px; position: relative; margin-bottom: 6px; }

form label { position: absolute; top: 0; left: 0; line-height: 32px; text-align: left; width: 110px; font-size: 14px; display: inline-block}

有几行需要像这样格式化。感谢您提供的任何帮助。

【问题讨论】：

有一种强烈的、合理的观点，以避免将表格仅用于布局目的。但是，当您提到有多行时，我觉得也许这是使用表格有意义的时候之一。
对我来说，引导程序中的浮点输入是问题的根源

标签： html css forms

【解决方案1】：

<div class="row">
  <label for="height">Height <br /><span>(help text here)</span></label>
  <input name="height" id="height" ... />
</div>


label {
  display: block;
  float: left;
}

使标签成为块元素，以便您可以放置 br。也不是一个好的解决方案，但它有效：P

【讨论】：

是的，这行得通！我还必须更改我设置的几个行高。感谢您的帮助！

【解决方案2】：

试试这个：

<div class="row">
<label for="height">Height (help text here)</label><input name="height" id="height" ... /><br/>
<label for="height">Sub text</label>
</div>

这可能是解决您问题的方法，但不是完美的解决方案

【讨论】：

当我尝试两个标签相互重叠但与输入字段内联时。
我编辑了我的代码，我忘记了<br/>。我把它们弄对了没有 CSS：position:absolute 使它们确实重叠

【解决方案3】：

怎么样：

<div class="row">
<label for="height">Height</label>
<input name="height" id="height" ... />
<label for="height" class="help">help text here</label>
</div>

还有 CSS：

.row label {
    display: inline-block;
    width: 40%;
}

.row input {
    display: inline-block;
    width: 50%;
    margin: 0 0 0 5%;
}

.row label.help {
    display: block;
}

JS Fiddle demo.

【讨论】：

我试过这个，但我看到标签重叠了。不过，这可能与我应用的另一种风格有关。