我有一些绝对定位的文本输入元素,我想给它们一些左右填充,因为这样可以更轻松地将光标放在要编辑的值的末尾。当我向左和/或向右填充时,文本框变得太长。为什么会这样呢?如何同时获得准确的定位和填充?
html
<div id="container">
<input type="text" class="no-padding" style="top:10%; left:05%; width:29%; height:10%;" value="1000">
<input type="text" class="no-padding" style="top:10%; left:35%; width:29%; height:10%;" value="2000">
<input type="text" class="no-padding" style="top:10%; left:65%; width:29%; height:10%;" value="3000">
<input type="text" class="padding" style="top:30%; left:05%; width:29%; height:10%;" value="1000">
<input type="text" class="padding" style="top:30%; left:35%; width:29%; height:10%;" value="2000">
<input type="text" class="padding" style="top:30%; left:65%; width:29%; height:10%;" value="3000">
</div>
的CSS
#container {
height: 300px;
width: 600px;
border: 1px solid dimgray;
position: relative;
}
input {
box-shadow: inset 0px 0px 0px 1px rgba(105, 105, 105, 1);
position: absolute;
border: none;
text-align: right;
}
.no-padding {
padding: 0;
}
.padding {
padding-left: 4px;
padding-right: 4px;
}
演示:jsfiddle
最佳答案
宽度的变化是因为您以内联样式指定了宽度(29%,我认为这是一种尝试破解您的方式,以使所有三个输入占据包括填充在内的所有宽度的1/3),但是宽度输入的宽度是“可写空间”的宽度。因此,添加填充(也就是文本和边框之间的空格)将增加宽度。
如上所述,混合百分比和像素大小通常是一个糟糕的主意。
但是,如果您只需要左右填充4px,则添加
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
到您的输入CSS。
这是一个摆弄它的小提琴:jsfiddle
关于html - 填充HTML输入更改绝对位置,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24441830/