Добавление выпадающего ввода в форму поиска

Question

У меня есть форма поиска, которая собирает адрес и передает его на мой php.

<form class="form-wrapper cf" id="search-form" action=/php/search.php method="post"> 
    <input type="search" id="address" name="address" placeholder="Address?" value="" /> 
    <button id="search" type="submit">Search</button> 
</form> 

HTML,/код CSS на этом jfiddle - http://jsfiddle.net/maverick_r77/A7j3q/

Я хотел бы добавить выпадающий вариант в форме, так что пользователи могут указать «типа адреса».

<select id="addrType"> 
    <option value="1">Residential</option> 
    <option value="2">Commercial</option> 
</select> 

Вот Jfiddle с выпадающим вариантом - jsfiddle.net/maverick_r77/85xnU/.

Я хотел бы выровнять выпадающее меню прямо между окном поиска и кнопкой поиска, но выравнивание становится все испорченным.

По существу, я пытаюсь создать что-то вроде SearchBox на http://www.goby.com/

Заранее спасибо за вашу помощь.

Answer 1

Если я понял, ваш вопрос касается большего количества HTML, чем PHP («смотреть», а не «внутренние работы»). Рассмотрим использование свойства CSS display:table-cell или some grid system.