Почему мой CSS перемещает текстовое поле вниз и на следующую строку? - PullRequest
Новая
       1

Почему мой CSS перемещает текстовое поле вниз и на следующую строку?

0 голосов
/ 13 ноября 2011

Я часами колотил головой, пытаясь понять это. Почему в этой демонстрации текстовое поле немного смещено вниз, а не на той же строке, что и синее поле? Заранее спасибо!

РЕДАКТИРОВАТЬ: Извините, если я не указал это четко: Верх текстового поля должен совпадать с верхом синего поля.

Ответы [ 3 ]

2 голосов
/ 13 ноября 2011

Мне кажется, что там есть немного Javascript, который гарантирует, что текстовое поле всегда будет таким же широким, как окно просмотра (или близко к нему). После этого это просто перенос строки, который гарантирует, что текстовое поле будет в следующей строке.

1 голос
/ 13 ноября 2011

Обновление: о, казалось бы, "неправильном" вертикальном размещении.

Вы должны применить margin-top:6px;margin-bottom:0px; к диапазону, чтобы решить проблему ( См. http://jsbin.com/eciyib/8). По умолчанию верхи нижнее поле span составляет 10 пикселей, как определено селектором #toolbar > *. Элемент <input> имеет верхнее и нижнее поле всего 6 пикселей, как указано в селекторе #url.

Вы не определили свойство width для элемента div#toolbar.Увидеть ниже.Когда область просмотра меньше, чем 1690px, элемент ввода сместится вниз, чтобы соответствовать.

JSBin: http://jsbin.com/eciyib/7/

div#toolbar   <missing width property>
    span      margin-left: 10px; margin-right: 5px; width: 22px;    total=  37px
    input#url margin-left: 5px; margin-right: 10px; width: 1228px;
              border-left-widt: 5px; border-right-width:5px         total=1553px
                                                                    total=1690px

Дальнейшие объяснения:

  • Элементы имеют поля по левому и правому краю в 5 пикселей, из-за #toolbar > * {margin:10px 5px;}
  • Селекторы #toolbar > *:first-child и #toolbar > *:last-child изменяют левое и правое поле дочерних элементов до 10 пикселей.
  • В результате оба элемента имеют горизонтальное поле 15px
  • Элемент ввода имеет фиксированную ширину 1228px, как определено inline
  • .элемент ввода наследует левую и правую границу 5 пикселей от браузера.
0 голосов
/ 13 ноября 2011

Ваш ввод слишком широк, чтобы поместиться в одну строку, и поле в одном правиле позиционирует его следующим образом: 

#toolbar > * {
    margin: 10px 5px;
}
...