CSS для сайта Mobie - окно поиска и кнопка в сочетании 100% ширины?

Question

Я пытаюсь оптимизировать свой сайт для мобильных устройств. Я собираюсь с 1 колонкой жидкого макета. У меня проблема в том, что я не могу получить окно поиска и кнопку отправки, чтобы иметь ширину 100%.

Это то, что я хочу:

Я не могу установить фиксированную ширину для окна поиска (вход). Также кажется, что игнорируется ширина: 100% и абсолютное позиционирование. Есть ли способ достичь этого? Я подумал, может быть, если я сделаю входной элемент встроенным, он достигнет 100%, но это не так. Спасибо

ОБНОВЛЕНИЕ - Как насчет этого: http://jsfiddle.net/jdln/3ms5f/

Я сделал окно поиска шириной 100%, но поместил его в контейнерный блок с 5em отступа справа. Так как div контейнера имеет ширину 100%, он сбивает кнопку с нового ряда, но я "поднял" кнопку с абсолютным позиционированием.

Кажется, это работает хорошо, когда я изменяю размер окна. Я думал, что макет будет более надежным, если я буду использовать em для ширины вместо px, что означает, что мне пришлось нормализовать размеры текста.

Есть ли проблемы с моим решением? Спасибо

Answer 1

http://jsfiddle.net/jdln/3ms5f/

Я сделал окно поиска шириной 100%, но поместил его в контейнерный блок с 5em отступа справа. Так как div контейнера имеет ширину 100%, он сбивает кнопку с нового ряда, но я "поднял" кнопку с абсолютным позиционированием.

Кажется, это работает хорошо, когда я изменяю размер окна. Я думал, что макет будет более надежным, если я буду использовать em для ширины вместо px, что означает, что мне пришлось нормализовать размеры текста.

Answer 2

Смотрите здесь: http://jsfiddle.net/chricholson/wCvVB/9/

Обратите внимание, что мне пришлось отключить границы от обоих входов, так как они в сумме составят число больше 100% (т.е. ширина 80% плюс 2 пикселя (граница с каждой стороны)). Вы можете сделать ввод 79% и 19% соответственно, а затем попытаться поместить границу 1px.

Я поместил все в div с шириной, но это также может быть тег body, который по умолчанию имеет ширину 100%.

Answer 3

Вы должны правильно содержать поля ввода, а ширина должна соответствовать их контейнеру. Попробуйте что-то вроде этого:

CSS

.searchbar {
    width:100%;
}

.searchfield, .searchbtn {
    float:left;
}

.searchfield {
    width:70%;
    margin-right:5%;
}

.searchfield input {
    width:100%;
}

.searchbtn {
    width:25%;
}

HTML

<div class="searchbar">
    <div class="searchfield">
        <input type="text" name="Search" value="Search" />
    </div>
    <div class="searchbtn">
        <input type="submit" value="Search" />
    </div>
</div>

ДЕМО: http://jsfiddle.net/andresilich/pHwYG/