Приднестровская поддержка XOOPS
Форма является блочным элементом и, подобно абзацу, располагается на новой строке. Как правило, такое поведение вполне соответствует поставленным целям, однако в определенных случаях может возникнуть необходимость добавления небольшой формы непосредственно в потоке элементов документа. В качестве примера можно привести окошко поиска, расположенное на одном уровне с другими элементами «шапки».
Решение
Чтобы форма отображалась как внутритекстовый, а не блочный, элемент, можно задать значение inline свойству display:
Ваш адрес электронной почты:
<form method="post" action="inline.html">
<div><input type="text" name="name" id="name" class="txt" />
<input type="submit" name="btnSubmit" id="btnSubmit"
value="Отправить" class="btn" />
</div>
</form>
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. Форма как внутритекстовый элемент
Отправитель | Нити |
---|
5 пользователь(ей) активно (4 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 5 далее... |