填充 html 输入更改绝对位置答案

【问题标题】：Padding html input changes absolute position填充 html 输入更改绝对位置
【发布时间】：2014-08-17 23:22:21
【问题描述】：

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

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

【问题讨论】：

您是否绝对肯定需要绝对职位？由于您的宽度是固定的，难怪：任何填充都会增加 div 的宽度。另外，您正在混合百分比和像素，因此您是在自找麻烦。为什么不使用 Bootstrap 网格系统？
我需要绝对位置，因为输入会覆盖背景图像并且具有我无法控制的任意位置。

标签： html css position padding absolute

【解决方案1】：

您需要查看 box-sizing。

box-sizing:border-box;

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

样式是内联的，因为它们是使用 JavaScript 计算和应用的。我可以使用百分比来查看填充，但窄文本框和宽文本框需要具有相同的填充。 box-sizing 规则正是我所需要的。