Html 样式输入元素以填充其容器的剩余宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/773517/
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
Style input element to fill remaining width of its container
提问by Joel Coehoorn
Let's say I have an html snippet like this:
假设我有一个这样的 html 片段：
<div style="width:300px;">
<label for="MyInput">label text</label>
<input type="text" id="MyInput" />
</div>
This isn't my exact code, but the important thing is there's a label and a text input on the same line in a fixed-width container. How can I style the input to fill the remaining width of the container without wrapping and without knowing the size of the label?
这不是我的确切代码，但重要的是在固定宽度容器的同一行上有一个标签和一个文本输入。如何在不包装且不知道标签大小的情况下设置输入的样式以填充容器的剩余宽度？
采纳答案by cobbal
as much as everyone hates tables for layout, they do help with stuff like this, either using explicit table tags or using display:table-cell
尽管每个人都讨厌用于布局的表格，但他们确实可以帮助解决此类问题，无论是使用显式表格标签还是使用 display:table-cell
<div style="width:300px; display:table">
<label for="MyInput" style="display:table-cell; width:1px">label text</label>
<input type="text" id="MyInput" style="display:table-cell; width:100%" />
</div>
回答by danijar
Here is a simple and clean solution without using JavaScript or table layout hacks. It is similar to this answer: Input text auto width filling 100% with other elements floating
这是一个简单而干净的解决方案，无需使用 JavaScript 或表格布局技巧。它类似于这个答案：输入文本自动宽度填充 100% 其他元素浮动
It is important to wrap the input field with a span which is display:block. Next thing is that the button has to come first and the the input field second.
用 .span 包裹输入字段很重要display:block。接下来的事情是按钮必须首先出现，然后输入字段。
Then you can float the button to the right and the input field fills the remaining space.
然后您可以将按钮浮动到右侧，输入字段填充剩余空间。
form {
width: 500px;
overflow: hidden;
background-color: yellow;
}
input {
width: 100%;
}
span {
display: block;
overflow: hidden;
padding-right:10px;
}
button {
float: right;
}<form method="post">
<button>Search</button>
<span><input type="text" title="Search" /></span>
</form>A simple fiddle: http://jsfiddle.net/v7YTT/90/
一个简单的小提琴：http: //jsfiddle.net/v7YTT/90/
Update 1:If your website is targeted towards modern browsers only, I suggest using flexible boxes. Here you can see the current support.
更新 1：如果您的网站仅针对现代浏览器，我建议使用弹性框。在这里你可以看到当前的支持。
Update 2:This even works with multiple buttons or other elements that share the full with with the input field. Here is an example.
更新 2：这甚至适用于与输入字段共享完整内容的多个按钮或其他元素。这是一个例子。
回答by leishman
I suggest using Flexbox:
我建议使用 Flexbox：
Be sure to add the proper vendor prefixes though!
不过一定要添加正确的供应商前缀！
form {
width: 400px;
border: 1px solid black;
display: flex;
}
input {
flex: 2;
}
input, label {
margin: 5px;
}<form method="post">
<label for="myInput">Sample label</label>
<input type="text" id="myInput" placeholder="Sample Input"/>
</form>回答by basarat
Please use flexbox for this. You have a container that is going to flex its children into a row. The first child takes its space as needed. The second one flexes to take all the remaining space:
请为此使用 flexbox。你有一个容器，它将把它的孩子排成一行。第一个孩子根据需要占用空间。第二个弯曲以占用所有剩余空间：
<div style="display:flex;flex-direction:row">
<label for="MyInput">label text</label>
<input type="text" id="MyInput" style="flex:1" />
</div>回答by llange
Easiest way to achieve this would be :
实现这一目标的最简单方法是：
CSS :
CSS :
label{ float: left; }
span
{
display: block;
overflow: hidden;
padding-right: 5px;
padding-left: 10px;
}
span > input{ width: 100%; }
HTML :
HTML :
<fieldset>
<label>label</label><span><input type="text" /></span>
<label>longer label</label><span><input type="text" /></span>
</fieldset>
Looks like :http://jsfiddle.net/JwfRX/
看起来像：http : //jsfiddle.net/JwfRX/
回答by Whome
Very easy trick is using a CSS calcformula. All modern browsers, IE9, wide range of mobile browsers should support this.
非常简单的技巧是使用CSS calc公式。所有现代浏览器、IE9、各种移动浏览器都应该支持这一点。
<div style='white-space:nowrap'>
<span style='display:inline-block;width:80px;font-weight:bold'>
<label for='field1'>Field1</label>
</span>
<input id='field1' name='field1' type='text' value='Some text' size='30' style='width:calc(100% - 80px)' />
</div>
回答by Andik
you can try this :
你可以试试这个：
div#panel {
border:solid;
width:500px;
height:300px;
}
div#content {
height:90%;
background-color:#1ea8d1; /*light blue*/
}
div#panel input {
width:100%;
height:10%;
/*make input doesnt overflow inside div*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/*make input doesnt overflow inside div*/
}<div id="panel">
<div id="content"></div>
<input type="text" placeholder="write here..."/>
</div>回答by DharmaTurtle
If you're using Bootstrap 4:
如果您使用的是 Bootstrap 4：
<form class="d-flex">
<label for="myInput" class="align-items-center">Sample label</label>
<input type="text" id="myInput" placeholder="Sample Input" class="flex-grow-1"/>
</form>
Better yet, use what's built into Bootstrap:
更好的是，使用 Bootstrap 内置的内容：
<form>
<div class="input-group">
<div class="input-group-prepend">
<label for="myInput" class="input-group-text">Default</label>
</div>
<input type="text" class="form-control" id="myInput">
</div>
</form>
