响应式设计:如何让文本输入和按钮保持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"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/

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

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

如果您想让我进一步解释,请告诉我.