假设我有一个这样的 html sn-p：
<div style="width:300px;">
<label for="MyInput">label text</label>
<input type="text" id="MyInput" />
</div>
这不是我的确切代码，但重要的是在固定宽度容器的同一行上有一个标签和一个文本输入。如何在不包装且不知道标签大小的情况下设置输入以填充容器的剩余宽度？
【问题讨论】：
这是一个简单而干净的解决方案，无需使用 JavaScript 或表格布局技巧。它类似于这个答案：Input text auto width filling 100% with other elements floating
用display:block 的span 包装输入字段很重要。接下来是按钮必须排在第一位，输入字段排在第二位。
然后您可以将按钮浮动到右侧，输入字段填充剩余空间。
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>一个简单的小提琴：http://jsfiddle.net/v7YTT/90/
更新 1：如果您的网站仅针对现代浏览器，我建议使用 flexible boxes。在这里你可以看到the current support。
更新 2： 这甚至适用于与输入字段完全共享的多个按钮或其他元素。这里是an example。
【讨论】：
尽管每个人都讨厌表格的布局，但他们确实可以帮助处理类似的事情，无论是使用明确的表格标签还是使用 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>
【讨论】：
table-cell。看我的回答。
我建议使用 Flexbox：
请务必添加正确的供应商前缀！
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>【讨论】：
label的例子吗？我会对如何使用border-box... 对原始问题中的 HTML 进行布局特别感兴趣
flex: 2 而不是flex: 1？
flex: 42 是
请为此使用 flexbox。你有一个容器，它将把它的孩子排成一排。第一个孩子根据需要占用它的空间。第二个弯曲以占用所有剩余空间：
<div style="display:flex;flex-direction:row">
<label for="MyInput">label text</label>
<input type="text" id="MyInput" style="flex:1" />
</div>【讨论】：
row，你不必指定它。
实现这一目标的最简单方法是：
CSS：
label{ float: left; }
span
{
display: block;
overflow: hidden;
padding-right: 5px;
padding-left: 10px;
}
span > input{ width: 100%; }
HTML：
<fieldset>
<label>label</label><span><input type="text" /></span>
<label>longer label</label><span><input type="text" /></span>
</fieldset>
【讨论】：
非常简单的技巧是使用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>
【讨论】：
你可以试试这个：
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>【讨论】：
如果您使用的是 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>
更好的是，使用 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>
【讨论】：