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

Возвращаемся в действительность: что работает сейчас • 277

к концу элемента style внутри тега head страницы. Удалите там два следующих
правила:
#form-newsletter * { display: inline; }
#form-newsletter input[type=text] { width: auto; }
Мы удаляем эти правила, чтобы начать работу с чистого листа. Так вы лучше пой-
мете, как правила модели гибкого поля влияют на стилизацию формы подписки.
Затем превратите форму в гибкое поле — тогда ее дочерние элементы по умолча-
нию будут выводиться горизонтально. Также необходимо задать ширину формы,
равную 100%, чтобы она заполняла содержащий ее блок от края до края. Сделайте
это в новом правиле #form-newsletter внутри медиазапроса:
#form-newsletter {
display: -moz-box;
display: -o-box;
display: -webkit-box;
display: box;
width: 100%;
}

Теперь добавьте небольшие зазоры между элементами формы:
#form-newsletter * {
margin-right: 3px;
}
#form-newsletter :last-child {
margin-right: 0;
}

Пока что вид формы почти не изменился — она выглядит как на рис. 7.20, — и тек-
стовое поле не растягивается на всю доступную ширину. Причина в том, что сейчас
для всех элементов формы используется внутреннее вычисление размера. Такой
вариант прекрасно подходит для метки и кнопки — они должны вмещать соот-
ветствующий текст и больше ничего лишнего, — но текстовое поле должно уметь
корректироваться, и об этом необходимо сообщить браузеру. Сделайте это, добавив
в медиазапрос следующее новое правило:

#form-newsletter input[type=text] {
-moz-box-flex: 1;
-o-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}

Сохраните страницу и просмотрите ее в Firefox, Safari или Chrome. Уменьшите ши-
рину окна до 550 пикселов или сильнее, чтобы активировать медиазапрос, а затем
взгляните на форму подписки на электронную рассылку. Сделайте окно браузера еще
уже и понаблюдайте за текстовым полем: оно всегда будет занимать все доступное

www.trk.kg