html - 填充 html 输入更改绝对位置

Question

我有一些绝对定位的文本输入元素，我想给它们一些左右填充，因为这样可以更容易地将光标放在值的末尾进行编辑。当我向左和/或右填充输入时，文本框变得太长。为什么会这样？如何同时获得准确的定位和填充？

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

Answer 1

宽度变化是因为你在内联样式中指定了一个宽度(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。

这是一个 fiddle ，展示了它的实际效果:jsfiddle