Заполнение ввода html изменяет абсолютную позицию

У меня есть несколько абсолютно позиционированных элементов ввода текста, и я хочу дать им отступы слева и справа, потому что это упрощает размещение курсора в конце значения для редактирования. Когда я даю входные данные слева и/или справа, текстовые поля становятся слишком длинными. Почему это происходит? Как я могу получить точное позиционирование и заполнение одновременно?

искаженные абсолютные позиции

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


html padding css absolute position
person tponthieux    schedule 26.06.2014    source источник
comment
Вы абсолютно уверены, что вам нужны абсолютные позиции? Поскольку ширина фиксирована, неудивительно: любой отступ увеличивает ширину div. Кроме того, вы смешиваете проценты и пиксели и, таким образом, напрашиваетесь на неприятности. Почему бы не использовать систему сетки Bootstrap?   -  person Christian Bonato    schedule 27.06.2014
comment
Мне нужны абсолютные позиции, потому что входные данные накладываются на фоновое изображение и имеют произвольные позиции, которые я не контролирую.   -  person tponthieux    schedule 27.06.2014

Ответы (2)


arrow_upward
1
arrow_downward

Изменение ширины связано с тем, что вы указываете ширину во встроенных стилях (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.

Вот скрипт, показывающий это в действии: jsfiddle

person Scott    schedule 26.06.2014
comment
Стили являются встроенными, поскольку они вычисляются и применяются с помощью JavaScript. Я могу изучить отступы с помощью процентов, но узкие и широкие текстовые поля должны иметь одинаковые отступы. Правило размера коробки — это как раз то, что мне было нужно. - person tponthieux; 27.06.2014

arrow_upward
0
arrow_downward

Вам нужно изучить размер коробки.

box-sizing:border-box;

У некоторых элементов ширина рассчитывается как ширина + ширина границы + ширина отступа, у других отступы включаются в общую ширину.

Обратите внимание, что это также может зависеть от браузера, поэтому таблица стилей нормализации также может помочь.

Скрипт: http://jsfiddle.net/hcH3H/1/

person RichardB    schedule 26.06.2014