如何在文本框中添加固定後綴

Question

我想在文本框中添加固定後綴。 例如，

<label> 
 
    <input type="checkbox" id="checked"> 
 
    <input type="text" class="form-control" id="num">% 
 
</label>

然而，在該方法中，三個部分 - 複選框，文本框和「％」將被在三個系顯示如果窗口很窄。

如何讓他們總是一起展示在一條線上？

Answer 1

您可以使用引導程序的input-group爲此在一個不錯的方式。

Demo Here

<div class="input-group"> 
    <span class="input-group-addon"><input type="checkbox" id="checked"></span> 
    <input type="text" class="form-control" id="num"> 
    <span class="input-group-addon">%</span> 
</div> 

Answer 2

添加一個包裝周圍的所有輸入和設置的寬度，這將讓包裝在一組寬度無論頁面寬度，見例如：https://jsfiddle.net/5wwg1q5j/7/

HTML

<div class="wrapper"> 
<label> 
    <input type="checkbox" id="checked"> 
    <input type="text" class="form-control" id="num">% 
</label> 
</div> 

CSS

.wrapper{width: 250px;} 

更好的選擇是在標籤上使用white-space: nowrap，請參閱示例：https://jsfiddle.net/5wwg1q5j/8/

HTML

<label> 
    <input type="checkbox" id="checked"> 
    <input type="text" class="form-control" id="num">% 
</label> 

CSS

label{white-space: nowrap;}