相对于输入字段的小帮助文本

Question

我需要将一个小的帮助文本直接放在文本输入字段下，如果该字段缩进（例如，如我的示例中那样通过单选按钮），则帮助文本也应该缩进。

我正在尝试的一个例子在这里：

#enteramt {
  width: 150px;
  display: inline;
}

#passwordHelpBlock {
  font-size: x-small;
  display: block;
}

<p class="lead">
  <input id="val_200" name="amount_sel" type="radio" value="200">
  <label for="val_200"> EUR 200,00</label>
  <br/>
  <input id="val_other" name="amount_sel" type="radio" value="other">
  <label for="val_other"> EUR
    <input class="inputdefault" id="enteramt" name="amount" type="text" value="" placeholder="z.B. 2,00">
  </label>
  <small id="passwordHelpBlock" class="form-text text-muted">Min. EUR 2,00</small>
</p>

另请参阅小提琴：https://jsfiddle.net/mheumann/wkLdjdcL/

我希望它看起来像这样：

我知道我可以使用 margin-left 将其移动，但在没有单选按钮的情况下也可能会出现相同的框，因此边距会有所不同。

有没有什么方法可以将“小”标签绑定到“输入”标签，以便它始终显示在正下方对齐？

编辑：删除了对 Bootstrap 的引用，因为代码片段不包含任何内容。

Answer 1

您可以将输入和帮助文本包装在 a 中<span>，并将其设为inline-block

看代码片段：

#enteramt {
  width: 150px;
  display: inline;
}

#passwordHelpBlock {
  font-size: x-small;
  display: block;
}

.input-help {
  vertical-align: top;
  display: inline-block;
}

<p class="lead">
  <input id="val_200" name="amount_sel" type="radio" value="200">
  <label for="val_200"> EUR 200,00</label>
  <br/>
  <input id="val_other" name="amount_sel" type="radio" value="other">
  <label for="val_other"> EUR
    <span class="input-help">
      <input class="inputdefault" id="enteramt" name="amount" type="text" value="" placeholder="z.B. 2,00">
      <small id="passwordHelpBlock" class="form-text text-muted">Min. EUR 2,00</small>
    </span>
  </label>
</p>