填充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，包括它们的填充），但是输入的宽度是＆＃34;可写空间＆＃34;的宽度。添加填充（也就是文本和边框之间的空格）将增加宽度。

正如已经提到的，混合百分比和像素大小通常是一个糟糕的想法。

但是，如果你只需要你的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

Answer 2

你需要研究盒子大小。

box-sizing:border-box;

某些元素的宽度计算为宽度+边框宽度+填充宽度，其他元素包括整体宽度内的填充。

请注意，这也可以是特定于浏览器的，因此规范化样式表也可能会有所帮助。

小提琴：http://jsfiddle.net/hcH3H/1/