Html 响应式设计：如何让文本输入和按钮保持父级的 100% 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18859469/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive Design: how to have text input and button stay 100% width of parent
提问by Oneezy
Very simple question... I'm hacking it right now with floated percentages (but I know that there has to be a better solution) please see my photo as an example to go by. I want to have the parent stay 100% in width and the search box be an automatic width that always stays next to the search button, and I want the search button to be able to grow as wide as it wants to (depending on the text inside of it/padding).
非常简单的问题......我现在正在用浮动百分比来破解它（但我知道必须有更好的解决方案）请以我的照片为例。我想让父级保持 100% 的宽度，并且搜索框是一个始终位于搜索按钮旁边的自动宽度，并且我希望搜索按钮能够随心所欲地增长（取决于文本里面/填充）。
回答by Oneezy
UPDATE (The Flexbox Way!)
更新（弹性盒方式！）
The proper way to achieve this now is with Flexbox!
现在实现这一目标的正确方法是使用 Flexbox！
CSS "Flexbox" Way(https://jsfiddle.net/1jxkyLdv/)
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>
THE OLD WAY
老方法
I despise using tables or using css to make divs act like tables), But here's the other way.
我鄙视使用表格或使用 css 使 div 像表格一样），但这是另一种方式。
CSS "Table-Cell" Way(http://jsfiddle.net/eUhTM/3/)
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>
SOLUTION
The main trick is to make the section a "display: table;" and the divs inside "display: table-cell;", you're input "width: 100%" and you're button "white-space: nowrap".
解决方案
主要技巧是使该部分成为“显示：表格；” 和“显示：表格单元格；”中的div，你输入“宽度：100%”，你是按钮“空白：nowrap”。
I'm still interested in solutions though!
不过，我仍然对解决方案感兴趣！
Thank you everyone for your great answers.
谢谢大家的精彩回答。
回答by MonkeyZeus
Correct answer from MrRioku in the comments
MrRioku 在评论中的正确答案
My original answer
我的原答案
This will probably be downvoted to oblivion for obvious reasons but what about doing this:
由于显而易见的原因，这可能会被低估，但这样做呢：
<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>
I used inline CSS for simplified viewing :)
我使用内联 CSS 来简化查看:)
回答by Pevara
This is indeed a bit tricky, especially if you do not know the width of the button in advance. You could off course go for a js solution, which should be fairly straightforward, but I prefer sticking to css as much as possible.
这确实有点棘手，特别是如果您事先不知道按钮的宽度。您当然可以选择 js 解决方案，这应该相当简单，但我更喜欢尽可能坚持使用 css。
I did come up with a solution that works in your layout:
我确实想出了一个适用于您的布局的解决方案：
<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;
}
and a fiddle: http://jsfiddle.net/VhZS5/
和小提琴：http: //jsfiddle.net/VhZS5/
Not the cleanest solution ever, but it should be cross (modern) browser (the border-box may require some prefixing), is semantically correct, and it doesn't use tables.
不是有史以来最干净的解决方案，但它应该是跨（现代）浏览器（边界框可能需要一些前缀），在语义上是正确的，并且它不使用表格。
Note that I positioned the button absolute on top of the input field. Then I used a :before on the button to cover up the input box slightly and give the impression of some spacing between the input and the button.
请注意，我将绝对按钮定位在输入字段的顶部。然后我在按钮上使用了一个 :before 来稍微掩盖输入框，并给人一种输入和按钮之间有一些间距的印象。
Let me know if you want me to explain further.
如果您想让我进一步解释，请告诉我。
