Встроенные проблемы с выравниванием div в Webkit?

Question

Встроенные проблемы с выравниванием div в Webkit?

0

Если вы посмотрите antonpug.com

Вы заметите, что в Firefox и Opera заголовок содержит заголовок (значок поиска) (меню)

Однако в Chrome и Safari кажется, что оба элемента отказываются быть встроенными, и вы получаете что-то вроде этого:

(Значок поиска)
Антон Пугачевский (Меню)

Я размышлял об этом на какое-то время, какие-нибудь идеи, почему это может произойти?

antonpug 21 окт. 2013, в 01:46

Источник

1

Кажется, потому что .navbar-header без явной ширины. Как только вы дадите ему ширину, например, 300 пикселей, он будет отображаться так, как вы хотите.
CBroe 20 окт. 2013, в 23:16
0

Если вы хотите, чтобы «поиск» появлялся после «бренда», не могли бы вы просто изменить их порядок в HTML? На данный момент поиск идет первым.
davidpauljunior 20 окт. 2013, в 23:35

Теги:

html

css

1 ответ

Ещё вопросы

Кажется, потому что .navbar-header без явной ширины. Как только вы дадите ему ширину, например, 300 пикселей, он будет отображаться так, как вы хотите.
Если вы хотите, чтобы «поиск» появлялся после «бренда», не могли бы вы просто изменить их порядок в HTML? На данный момент поиск идет первым.

Will · Accepted Answer · 2013-10-20T21-41-00.000Z

Если вы хотите, чтобы элементы правильно плавали в CSS, вам нужно установить ширину их контейнера, иначе внешний контейнер получит только ширину самого большого дочернего элемента.

В вашем случае просто установите ширину для.navbar-header, и элементы отобразятся в строке.

Если вы хотите, чтобы поиск находился слева от заголовка, просто добавьте float: left to # search-icon.

Например

.navbar-header{ width:50%; }

.navbar-header #search-icon{ float:left; margin-right:30px; }

Это решает проблему под рукой, но теперь происходит то, что, когда вы уменьшаете ширину до размера мобильного устройства, вы видите, что она сломана (кнопка меню не выровнена по правой стороне экрана, а кнопка поиска расположена неправильно). )
Я починил это. Пришлось использовать медиа-запрос, чтобы установить размер фиксированной ширины, когда он меньше определенного размера! Спасибо