响应式设计：如何让文本输入和按钮保持父级的 100% 宽度

Question

非常简单的问题...我现在正在用浮动百分比破解它（但我知道必须有更好的解决方案）请以我的照片为例。我想让父级保持 100% 的宽度，并且搜索框是始终保持在搜索按钮旁边的自动宽度，并且我希望搜索按钮能够随心所欲地增长（取决于文本里面/填充）。

Answer 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 使 div 像表格一样），但这是另一种方式。

CSS“表格单元”方式 (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-cell;”中的 div，你输入“width: 100%”，你是按钮“white-space: nowrap”。

不过，我仍然对解决方案感兴趣！

感谢大家的精彩回答。

Answer 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/

不是最干净的解决方案，但它应该是跨（现代）浏览器（边框可能需要一些前缀），语义正确，并且不使用表格。

请注意，我将按钮绝对定位在输入字段的顶部。然后我在按钮上使用 :before 稍微遮住输入框，并在输入和按钮之间留下一些间距的印象。

如果您希望我进一步解释，请告诉我。

Answer 3

来自 MrRioku 在 cmets 中的正确答案

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 来简化查看:)