如何使输入字段占未使用空间的100%？
提问于 2015-08-26 15:19:05
我已经在这个小东西上转了好几个小时了。我有个div。在这个div中，我希望右边(并排)有两个按钮，行的其余部分由一个输入字段填充。我已经尝试了无数的CSS选项组合，但我无法弄清楚。
我需要item1和item2并排并排，占用父div的整个宽度。CSS大师有什么想法吗？谢谢！！
<div style="width: 50%; border: 1px solid black; height: 300px;">
<br/>
<div style="width: 100%">
<input id="item1" type="text" style="width: 100%"/>
<div id="item2">
<button>button1</button>
<button>button2</button>
</div>
</div>
</div>
回答 4
Stack Overflow用户
回答已采纳
发布于 2015-08-26 15:28:04
现代方法-挠曲箱
使用flexbox -将包装器<div>设置为display: flex，将<input>设置为flex: 1 (有效地将flex-grow: 1设置为flex-grow: 1)：
#wrapper {
display: flex;
}
#item1 {
flex:1;
}http://jsfiddle.net/vasxmg1d/10/
关于柔性盒的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
通过CSS的旧方法-表布局
如果您喜欢使用表布局，那么至少要通过CSS来实现，而不是在HTML中引入表标记(但是您需要在输入周围添加一个包装器元素来实现它)
http://jsfiddle.net/vasxmg1d/12/
<div id="item1">
<input type="text"/>
</div>和CSS
#wrapper {
display: table;
}
#item1,#item2 {
display: table-cell;
white-space: nowrap;
}
#item1 {
width: 100%;
}
#item1>input {
width: 100%;
}Stack Overflow用户
发布于 2015-08-26 15:30:55
你也可以使用tables
遵循以下原则：
<div style="width: 50%; border: 1px solid black; height: 300px;">
<br/>
<table style="width: 100%">
<tr>
<td width="100%"><input type="text" style="width: 100%;box-sizing:border-box;"/></td>
<td><button>button1</button><br><button>button2</button></td>
</tr>
</table>
</div>Stack Overflow用户
发布于 2015-08-26 15:24:21
不确定我是否明白你的问题。尽管如此，我只是在玩弄百分比。看看JS。
http://jsfiddle.net/vasxmg1d/2/
<input id="item1" type="text" style="width: 65%"/>我在你的纽扣上放了一个百分位，这样他们就能合身了。
button{
float:left;
width:15%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32238225
复制
腾讯云开发者
