Избавление от переносов строки и потери места на странице
Форма является блочным элементом и, подобно абзацу, располагается на новой строке. Как правило, такое поведение вполне соответствует по- ставленным целям, однако в определенных случаях может возникнуть необходимость добавления небольшой формы непосредственно в потоке элементов документа. В качестве примера можно привести окошко по- иска, расположенное на одном уровне с другими элементами «шапки».
Решение
Чтобы форма отображалась как внутритекстовый, а не блочный, эле- мент, можно задать значение inline свойству display:
chapter06/inline.html (фрагмент)
Your email address:
<form method=”post” action=”inline.html”>
<div><input type=”text” name=”name” id=”name” class=”txt” />
<input type=”submit” name=”btnSubmit” id=”btnSubmit”
value=”Submit” class=”btn” /></div>
</form>
chapter06/inline.css
form {
display: inline;
}
input.txt {
color: #00008B;
background-color: #E3F2F7;
border: 1px inset #00008B;
width: 200px;
}
input.btn {
color: #00008B;
background-color: #ADD8E6;
border: 1px outset #00008B;
}
Как видно на рис. 6.5, благодаря использованию CSS форма встраива- ется в общий поток документа и отображается как внутритекстовый элемент рядом с окружающим текстом:
Рис. 6.5. Форма как внутритекстовый элемент
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- Оценка авторитетности контента (0)
- Создание «резинового» макета: слева – меню, а справа – область с контентом (0)
- Создание макета с тремя колонками средствами CSS (0)
- Изменение стиля горизонтальной линии (0)
- Создание навигационного меню с подпунктами с помощью списков и таблиц стилей (0)
- Создание горизонтального меню с помощью списков и CSS (0)
- Удаление подчеркивания ссылок (0)