与输入字段相关的小帮助文本

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>

另见 Fiddle：https://jsfiddle.net/mheumann/wkLdjdcL/

我希望它看起来像这样：

我知道我可以使用 margin-left 来移动它，但同样的框也可能出现没有单选按钮，所以边距会有所不同。

有什么方法可以将“小”标签绑定到“输入”标签上，这样它就总是在正下方对齐？

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

Answer 1

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

见代码 sn-p：

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

Answer 2

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

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

.p-l-none{
  padding-left:0px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
  <div class="col-lg-12">
    <input id="val_200" name="amount_sel" type="radio" value="200">
  <label for="val_200"> EUR 200,00</label>
  
  </div>
</div>


<div class="row">
  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
   <input id="val_other" name="amount_sel" type="radio" value="other">
   EUR   
    
  </div>
  <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 p-l-none">
  <input class="inputdefault" id="enteramt" name="amount" type="text" value="" placeholder="z.B. 2,00" class="form-control">
    <small id="passwordHelpBlock" class="form-text text-muted">Min. EUR 2,00</small>
  </div>
</div>

这里是JSFiddle

这与您正在寻找的相同吗？ 希望这会有所帮助。

Answer 3

使用Adjacent sibling selectors怎么样？ 此处填充将仅应用于.text-muted，其前面是radio 类型的输入和标签。 （只是为了匹配你当前的html） 如果没有单选按钮/标签，则不会应用填充。

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

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

input[type=radio] + label + .text-muted {
  padding-left: 60px;
}

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