填充html输入更改绝对位置

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

html

---

演示：

您需要查看盒子大小

box-sizing:border-box;

一些元素的宽度计算为宽度+边框宽度+填充宽度，其他元素包括总宽度内的填充

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

---

Fiddle:

宽度更改是因为您在内联样式中指定了一个宽度（29%，我认为这是一种尝试，使所有三个输入占用1/3的宽度（包括其填充），但输入的宽度是“可写空间”的宽度。因此，添加填充（即文本和边框之间的空格）将增加宽度

如前所述，混合百分比和像素大小通常是一个糟糕的想法

但是，如果你只需要有你的4倍左右的填充，然后添加

-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

---

这里有一把小提琴展示了它的作用：

你是否绝对肯定你需要绝对位置？既然宽度是固定的，难怪任何填充都会增加div的宽度。另外，你混合了百分比和像素，因此你在自找麻烦。为什么不使用Bootstrap网格系统？我需要绝对位置，因为输入覆盖了背景图像，并且具有我无法控制的任意位置。样式是内联的，因为它们是用JavaScript计算和应用的。我可以用百分比查看填充，但是窄文本框和宽文本框需要有相同的填充。盒子大小规则正是我所需要的。

box-sizing:border-box;

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;   /* Opera/IE 8+ */