Борьба с автоматическим растяжением поля поиска с использованием CSS

Question

Последние несколько часов я изо всех сил пытался заставить это поле поиска растягиваться в браузере (например, amazon.com).

Я пробовал разные вещи, найденные в Google, такие как создание поля ввода или родительского контейнера на 100%, переполнение ... и т. Д., Но я не могу его получить: /

Также я попытался всплыть в правой части категорий, и он поменялся местами с помощью кнопки отправки.

Есть идеи, где я ошибаюсь?

http://jsfiddle.net/SkinnyGeek1010/RzHWA/

Answer 1

Это может быть ситуация, когда вам может понадобиться использовать стол, если вы хотите, чтобы работа была выполнена.Используя форму, содержащую таблицу из одной строки, разделите содержимое на три ячейки с полем ввода в средней ячейке.Установите ширину таблицы и ширину средней ячейки равными 100%, а ширину поля ввода - примерно 98% (попробуйте 100%, и вы поймете, почему его нужно немного уменьшить).Да, и предотвратите разрывы строк внутри ячеек.

Отрывочная демонстрация концепции: http://jsfiddle.net/yucca42/hyEPu/

Если полиция вашей компании запрещает таблицы для разметки, попробуйте сообщить им, что это таблица данных.Если это не удастся, вы можете смоделировать таблицу, используя display: table и т. Д. В CSS (хотя это усложняется и приведет к сбою в старых версиях IE).