Page 269 - Сила CSS3 Освой новейший стандарт

Создание многостолбцовых макетов без плавающих полей • 269

display: -webkit-box;
display: box;
padding: 20px 0;
}

Как я уже объясняла выше, дочерние элементы гибких полей по умолчанию выво-
дятся бок о бок, т. е. горизонтально, и для этого не требуется устанавливать свой-
ство box-orient. Это небольшое изменение в коде CSS помещает логотип и форму
поиска на одну строку (рис. 7.15).

Рис. 7.15. Теперь, когда логотип и форма поиска превратились в дочерние элементы
гибкого поля, они выводятся рядом друг с другом

Для того чтобы форма поиска отображалась у правого края окна, а не вплотную
к логотипу, нужно приказать ей растянуться и заполнить все пространство справа от
изображения. Кроме того, необходимо свойству text-align присвоить значение right,
для того чтобы передвинуть к правому краю не только саму форму, но и ее содержимое.
Добавьте новое правило #form-search, которое позаботится об обеих этих задачах:
#form-search {
-moz-box-flex: 1;
-o-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
text-align: right;
}

Теперь в Safari и Chrome форма поиска отображается справа, как и требуется
(рис. 7.16). Однако в Firefox она даже не пошевелилась. Причина в том, что Firefox
использует внутренний размер div-блока header и делает его равным ширине его
содержимого. Это правильное поведение для дочерних элементов полей, но Firefox
не должен так поступать с самим родительским полем. Тем не менее данное недо-
разумение легко устранить: нужно всего лишь задать ширину div-блока header,
равную 100%:
#header {
display: -moz-box;
display: -o-box;
display: -webkit-box;
display: box;
width: 100%;
padding: 20px 0;
}

www.trk.kg