Question

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

标签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}

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

Answer 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

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

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

Answer 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

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

3 个答案: