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



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/

10-10 23:41
查看更多