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

Question

非常简单的问题......我现在正以乱价百分比攻击它（但我知道必须有更好的解决方案）请将我的照片作为一个例子来看看。我想让父母保持100％的宽度，搜索框是一个自动宽度，始终保持在搜索按钮旁边，我希望搜索按钮能够扩展到想要的宽度（取决于文本）在它内部/填充）。

Answer 1

更新（Flexbox Way！）

现在实现这一目标的正确方法是使用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“Table-Cell”方式（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;”和“display：table-cell;”中的div，你输入“width：100％”，你就是按钮“white-space：nowrap”。

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

感谢大家的回答。

Answer 2

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进行简化查看：）

Answer 3

这确实有点棘手，特别是如果您事先不知道按钮的宽度。你当然可以选择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/

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

请注意，我将按钮绝对放在输入字段的顶部。然后我使用了一个：在按钮之前稍微遮住输入框并给出输入和按钮之间有一些间距的印象。

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