Отзывчивый дизайн: как иметь ввод текста и кнопку пребывания 100% ширины родительского

Ответ 1

ОБНОВЛЕНИЕ (путь Flexbox!)

Правильный способ достижения этого теперь - Flexbox!

CSS "Flexbox" Путь (https://jsfiddle.net/1jxkyLdv/)

    /* CSS
    **************************************************************************/

    /* Reset */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { margin: 1rem; }
    h2 { margin: 2rem 0 0; }


    /* Flexbox Example */
    .flexbox { display: flex; }
    .flexbox .stretch { flex: 1; }
    .flexbox .normal { flex: 0; margin: 0 0 0 1rem; }
    .flexbox div input { padding: .5em 1em; width: 100%; }
    .flexbox div button { padding: .5em 1em; white-space: nowrap; }



    <!-- HTML ------------------------------------------------------------------->

    <h1>Flexbox Way!</h1>

    <h2>Short Word</h2>
    <section class="flexbox">
            <div class="stretch">
                <input type="text" placeholder="Search..." />
            </div>
            <div class="normal">
                <button>Search</button>
            </div>
    </section>

    <h2>Long Word</h2>
    <section class="flexbox">
            <div class="stretch">
                <input type="text" placeholder="Search..." />
            </div>
            <div class="normal">
                <button>Super Long Word For Search Button With Flexbox!</button>
            </div>
    </section>

СТАРЫЙ ПУТЬ

Я презираю использование таблиц или используя css для того, чтобы divs действовали как таблицы), но здесь другой путь.

CSS "Table-Cell" Way (http://jsfiddle.net/eUhTM/3/)

        * { box-sizing: border-box; }

        section { width: 100%; display: table; padding: 1em 0 0; }
        div { display: table-cell; width: 100%; }
        input { width: 100%; padding: .5em 1em; }
        button { color: black; padding: .5em 1em; white-space: nowrap; margin: 0 0 0 1em; }

        <h1>Short Word</h1>
        <section>
                <div>
                    <input type="text" placeholder="Search..." />
                </div>
                <div>
                    <button>Search</button>
                </div>
        </section>

РЕШЕНИЕ
Основной трюк состоит в том, чтобы сделать раздел "display: table"; и divs внутри "display: table-cell;", вы вводите "width: 100%", и вы являетесь кнопкой "white-space: nowrap".

Я все еще интересуюсь решениями!

Спасибо всем за ваши замечательные ответы.

Ответ 2

Это действительно немного сложно, особенно если вы заранее не знаете ширину кнопки. Вы могли бы отказаться от решения js, которое должно быть довольно простым, но я предпочитаю придерживаться css как можно больше.

Я придумал решение, которое работает в вашем макете:

<div class='searchBox'>
    <input type='text' placeholder='search...'/>
    <button>Search</button>
</div>



    .searchBox {
        position: relative;
        padding: 10px;
    }
    input {
        box-sizing: border-box;
        width: 100%;
        border: 1px solid #999;
        background: #fff;
        padding: 10px;
    }
    button {
        height: 40px;
        background-color: #555;
        padding: 0 10px;
        border: none;
        color: #fff;
        position: absolute;
        top: 10px;
        right: 9px;
    }
    button:before {
        content: '';
        position: absolute;
        display: block;
        height: 40px;
        top: 0px;
        left: -10px;
        width: 10px;
        background: #fff;
        border-left: 1px solid #999;
    }

и скрипка: http://jsfiddle.net/VhZS5/

Не самое чистое решение, но оно должно быть перекрестным (современным) браузером (пограничный блок может потребовать некоторого префикса), является семантически правильным и не использует таблицы.

Обратите внимание, что я позиционировал кнопку absolute над полем ввода. Затем я использовал: прежде чем на кнопке слегка прикрыть окно ввода и создать впечатление промежутка между входом и кнопкой.

Сообщите мне, если вы хотите, чтобы я объяснил дальше.

Ответ 3

Правильный ответ от MrRioku в комментариях

http://jsfiddle.net/eUhTM/3/

Мой оригинальный ответ

http://jsfiddle.net/eUhTM/

Это, вероятно, будет уменьшено до забвения по очевидным причинам, но как насчет этого:

<table style="width:100%;">
    <tr>
        <td style="width:100%;">
            <input type="text" placeholder="Search" style="width:100%;">
        </td>
        <td>
            <input type="submit" value="Search">
        </td>
    </tr>
</table>

Я использовал встроенный CSS для упрощенного просмотра:)