Тянущаяся строка поиска как на яндексе

Понадобилось мне сделать строку поиска на сайте, как на главной странице Яндекса. Чтобы input кнопка поиска занимала 100% от родительского блока. На яндексе поступили просто и сделали это с помощью таблиц. Этот вариант мне не понравился, таблицы все таки не для верстки предназначены да и тегов многовато (:. Использовать float лишний раз на странице может принести больше проблем, чем пользы тем более если есть способ и без него, что я дальше и покажу.

Так проблемы мы себе придумали теперь будем их доблестно решать. Я их решил с помощью еще одного тега, не считая родительского и 2х инпутов. Для это наши инпуты надо просто обвернуть в div и написать пару css свойств.


<div class="block">
    <div class="search-wrap">
        <input type="text" class="search-text"/>
        <input type="submit" class="search-button" value="Найти"/>
    </div>
</div>
 

Чтобы растянуть строку поиска так, чтобы ширина строки + ширина кнопки равнялись ширине родительского блока, при этом чтобы изменялся размер только у строки запроса, а кнопка оставалась фиксированного размера. Прошипим следующие свойства.


.search-wrap {
    margin-right:70px;
}
.search-text {
    margin-right:-70px;
    width:100%;
}
.search-button {
    width:70px;
    position:relative;
    left:70px;
}
 

Что же у нас здесь происходит? Т.к. у блока search-wrap ширина по умолчанию равна ширине родительского блока минус отступы. Этим мы и воспользовались оставив место для кнопки справа с помощью margin-right. Когда мы у input указали width = 100% он развернулся на всю ширину блока search-wrap, что равно ширине родительского блока минус ширина кнопки. При этом кнопка переносится на другую строку, чтобы вернуть ее обратно укажем у search-text отрицательный отступ справа. И так кнопка оказывается на нужно строчке осталось ее только передвинуть на свободное место справа от строки поиска. Для этого ей укажем свойство position равное relative, что позволит позиционировать кнопку относительно текущего положения, и смести ее вправо с помощью свойства left.

Данный прием применяется только для инлайновыйх объектов, поэтому для реализации колонок он не подойдет.

Протестирован в 
  • IE7,8
  • Firefox 3.5.3
  • Opera 10.10
  • Chrome 4.0.302.2

Напоследок конечно пример.

Понравилась статья? Помогите блогу перейдите по рекламе, вам это ничего не будет стоить.

Комментарии.

Написать комментарий