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

Question

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

我尝试的一个例子就是：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

我希望它看起来像这样：

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

有没有办法绑定＆＃34;小＆＃34;标记为＆＃34;输入＆＃34;标记所以它总是直接在下面对齐？

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

Answer 1

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

请参阅代码段：

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是JSFiddle

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

Answer 3

如何使用Adjacent sibling selectors？ 这里填充仅应用于.text-muted，其前面是无线电类型和标签的输入。 （只是为了匹配你当前的HTML） 如果没有单选按钮/标签，则填充不适用。

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;