相對於輸入字段的小幫助文本

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

你可以用一個<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>