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

我想要一个与输入字段关联的标签。有些标签需要放在多行上。但是，我无法查看文本。我正在努力实现的目标如下所示：

标签1

标签1的子文本

我目前拥有的代码如下：

高度（此处的帮助文本）

CSS:

表单{宽度：100%；溢出：隐藏；页边距顶部：-20px；}

form.row{高度：100%；溢出：隐藏；左填充：140px；宽度：295px；行高：30px；位置：相对；页边距底部：6px；}

表单标签{位置：绝对；顶部：0；左侧：0；行高：32px；文本对齐：左侧；宽度：110px；字体大小：14px；显示：内联块}

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

试试这个：

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

高度（此处的帮助文本）

子文本

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

<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

怎么样：

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