Question

我想在文本框中添加固定后缀。例如，

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

但是，在这种方法中，如果窗口很窄，则三部分 - 复选框，文本框和“％”将以三行显示。

如何让他们总是一起显示？

Answer 1

在所有输入周围添加包装并设置宽度，这将使包装器保持设置的宽度而不管页面宽度，请参阅示例：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;}

Answer 2

您可以使用Bootstrap 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>

如何在文本框中添加固定后缀

2 个答案: