HTML TextBox 数字后面的永久文本

Question

我想为单位测量创建一个文本框。例如“1 公斤”。 我知道可以在文本框后面包裹文本，但我希望该单元位于文本框本身内部。虽然数字可以更改，但其后面的单位应保留在文本框本身的末尾。有办法做到吗？可能使用CSS？

谢谢!

Answer 1

将您的输入包装在 div 中，将您的单位作为子元素添加到该 div 并将其放置在文本框上方。

JSBIN:http://jsbin.com/mayurexoyi/1/edit?html,css,output

HTML

  <div class="input_wrapper">
    <input type="text" value="20" />
    <div class="unit">KG</div>
  </div>

CSS

input {
  font-size:14px;
  padding:10px 25px 10px 10px;
  border:1px solid #CCC;
}

.input_wrapper {
  float:left;
  position:relative;  
}

.input_wrapper .unit {
  position:absolute;
  right:10px;
  top: 14px;
  color:#999;
}