Отрицательная проблема левой маржи и таинственная разница в 4 пикселя - PullRequest
Новая
       2

Отрицательная проблема левой маржи и таинственная разница в 4 пикселя

2 голосов
/ 12 февраля 2012

Я довольно долго чешу голову и, наконец, решил обратиться за помощью.На самом деле, у меня есть простая форма с двумя входами (поле + кнопка), и я хочу, чтобы при наведении формы на кнопку было перенесено поле, чтобы исправить ширину текстового поля + отступы.

Я использую margin-left: -31pxна кнопку, ширина которой составляет 27px.

Вы можете попробовать ее на http://jsfiddle.net/UfK6K/, и она появляется like

НО, когда я устанавливаю margin-left: -32px она ломаетсярасположение.http://jsfiddle.net/UfK6K/1/ и появляется like

Теперь, если я изменю ширину кнопки на любую фигуру и до тех пор, пока я сохраняю поле слева в пределах отрицательной разницы в 4 пикселя, это работает, но когда оно увеличивается, как в случае -32px ломается.

Я хочу понять, откуда в игру вступает разница 4px?И, конечно, как я могу переместить кнопку немного влево над текстовым полем?

* Это ломается во всех браузерах, кроме Opera.

Ответы [ 4 ]

5 голосов
/ 13 февраля 2012

Ну, это очень сложный вопрос, откуда 4px. Я постараюсь ответить на него.

Если для любого элемента задано отображение inline-block, то 4px находятся справа от этого элемента. На самом деле это размер, который занимает «белое пространство», да, это фактически белое пространство.

Вы можете думать об этом как о том, что элемент inline-block разделен пробелом и обычно занимает 4 пикселя, потому что в Opera это занимает немного больше (хотя не уверен насчет последней версии - потому что разные шрифты отображают пробелы с различной шириной в В разных браузерах единственным шрифтом, который отображает одинаковую ширину пробелов в браузерах и размерах шрифтов, является Courier New. Это шрифт с фиксированной шириной, ширина которого 0,63 мкм.). Но вы поняли смысл?

Теперь существуют различные варианты обхода, такие как float: влево или даже установка отрицательного 4px межбуквенного интервала родительского элемента, который содержит встроенные заблокированные элементы.

Вы также можете попробовать размер шрифта: 0;

А в вашем конкретном случае позиция: абсолютная; кажется лучшим вариантом.

1 голос
/ 12 февраля 2012

4px происходит от рендеринга пробела между двумя полями ввода.Кнопка переходит к следующей строке, потому что вы не оставляете достаточно места для отображения пустого пространства в первой строке после первого поля ввода.

Пустое пространство переносится на следующую строку и кнопкузатем визуализируется после него, сдвигается с помощью параметра margin-left.

Как вы уже обнаружили, удаление пробела между полями ввода решает проблему.Альтернативой в CSS было бы добавить white-space: nowrap; к стилю form.

1 голос
/ 12 февраля 2012

Вы можете добавить position: absolute; к CSS кнопки. 

.sbutton {
    position: absolute;
    margin-left: -30px;
    margin-top: 1px;
    /* ... */
}

Fiddle: jsfiddle.net/UfK6K/4

Не уверен, почему он ломается (здесь FF9).Позиционирование CSS может иногда доставлять массу удовольствия.

0 голосов
/ 12 февраля 2012

Еще один способ сделать это - добавить 

.sbutton {
    margin-right: 5px;
    margin-left: -32px;
}

и по какой-то причине это исправляет. Затем для каждого уменьшения пикселя в поле слева увеличьте поле справа.

отрицательные поля всегда смущали меня ...

...