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

Input label on two lines next to input field

提问by Rosemary

I want to have one label that is associated with the input field. Some of the labels need to go on more than one line. However, I am not able to view the text. What I am trying to achieve is shown below:

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

Label 1                      <input />
sub text for label 1

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

The code I currently have is as follows:

我目前拥有的代码如下：

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

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

CSS:

CSS：

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

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

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

There are a few rows that need to be formatted like this. Thank you for any help you can provide.

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

回答by corroded

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

make the label a block element so you can put a br. not a good solution also but it works :P

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

回答by 3rgo

Try this :

尝试这个 ：

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

It may be a workaround to your issue, but not a perfect solution

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

回答by David says reinstate Monica

How about:

怎么样：

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

And CSS:

和 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.

JS小提琴演示。