我正在开发一个系统，其中包括一些文本框，用于测量温度、每分钟心率等。现在我只使用一个文本框，并在同一行的文本框后面添加单位。
我的问题是空间相当有限，因此如果可能的话，我想在文本框中包含单位信息，例如右对齐。我了解 HTML5 占位符属性，但这仅适用于空字段，并且在输入数据后就会消失。我希望该单位信息始终可见。
是否存在类似占位符的永久版本的东西？或者有没有办法可以实现这样的功能？我搜索过这个问题并发现这个链接这几乎解决了问题，但输入文本时所有这些占位符都会消失 - 我想要占位符的等效项，但让它始终可见，但在提交时不会显示在 POST 数据中。
通过将输入内容包装在特殊的 div 中，您可以添加文本块并将其绝对定位在输入字段上方。
.input-container {
position: relative;
width: 150px;
}
.input-container input {
width: 100%;
}
.input-container .unit {
position: absolute;
display: block;
top: 3px;
right: -3px;
background-color: grey;
color: #ffffff;
padding-left: 5px;
width: 45px;
}
<div class="input-container">
<input type="text" value="102.95" name="" />
<span class="unit">Volts</span>
</div>
<div class="input-container">
<input type="text" value="30" name="" />
<span class="unit">Kilos</span>
</div>
<div class="input-container">
<input type="text" value="64" name="" />
<span class="unit">km/h</span>
</div>
Demo: http://jsfiddle.net/mgmBE/3/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
