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

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 将其移动，但如果没有单选按钮，同样的框也可能出现，因此边距会有所不同。

有没有什么方法可以将 "small" 标签绑定到 "input" 标签，以便它始终显示在正下方对齐？

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

Answer 1

您可以将输入和帮助文本包装在 <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>

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 ，其前面是无线电类型的输入和标签。（只是为了匹配您当前的 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>

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

Small help text relative to input field

html

css

html-input