如何使输入元素占据所有剩余的水平空间？
这是代码：
<div style="width:400px">
some text..
<input type="text" />
<button value="click me" />
</div>
如何在保持同一行的同时使输入元素扩展为填充所有剩余空间？如果我100％投入，它会走自己的线…
问题答案：
可以在IE7 +和所有现代浏览器中使用。
.formLine {
overflow: hidden;
background: #ccc;
}
.formLine input {
width: 100%;
}
.formLine label {
float: left;
}
.formLine span {
display: block;
overflow: hidden;
padding: 0 5px;
}
.formLine button {
float: right;
}
.formLine input, .formLine button {
box-sizing: border-box;
}
<div class="formLine">
<button>click me</button>
<label>some text.. </label>
<span><input type="text" /></span>
</div>
在button首先必须走在HTML。有点令人反感，但值得一看。
关键步骤是使用overflow: hidden;：为何需要这样做的解释如下：
多余的跨度input是必需的，因为display:block;它对以下内容没有影响input：[CSS/DOM中的什么阻止了带有display：块的输入框扩展到其容器的大小
-
问题内容： 我有2个div： 页面左侧有一个，右侧是一个。左侧的一个宽度固定，我希望右侧的一个填充剩余空间。 问题答案： 这似乎可以完成您想要的。
-
问题内容： 如何实现以下目标： 左对齐 右对齐 占据父级中的所有剩余宽度 左对齐，也必须左对齐 二者并应服从作为最大尽可能别处定义字体属性。在窗口内居中对齐，并且自然可以具有任意宽度。 请指教。 问题答案： 更新 [2016年10月]：Flexbox版本… 原始答案[2011年4月]：无表CSS版本（表行为）… CSS …
-
问题内容： 我在flexbox中并排有2个div。右手应始终具有相同的宽度，我希望左手仅抓住剩余空间。除非我专门设置宽度，否则它不会。 因此，现在将其设置为96％，直到您真正按下屏幕为止，它看起来还可以-右div有点饿了它所需的空间。 我想我可以保留原样，但感觉不对，就像必须要说的那样： 正确的人永远是相同的； 你在左边-你得到剩下的一切 问题答案： 使用该属性可以使弹性项目消耗 主轴上的 可用空
-
问题内容： 我有这个问题，我有两个股利： 如何使div2占据页面的剩余高度？ 问题答案： 使用绝对定位：
-
问题内容： 在下面的HTML片段中，如何使包含“ LAST”的列的宽度占据行的其余部分，并且包含“ COLUMN ONE”和“ COLUMN TWO”的列的宽度足够宽以包含其内容，而不是更大。 谢谢 问题答案： 您将需要告诉前两列不要换行，并为最后一列提供99％的宽度： 编辑： 您应该将所有样式/演示文稿放在（外部…）css中。 对列使用类（如果您仅针对现代浏览器，则可以使用css3选择器，例如）
-
ANTLR愉快地将所有的表达解析成成分，听者作用于相关的成分，生活是快乐的。下面是语法的一个代表性片段： 但现在，我需要扩展语法以合并两个新表达式，这两个表达式都以接受任何字符序列（包括Unicode）结束，直到。示例输入： 我很难在语法中表达对的所有输入的接受。以下变化导致痛苦： 如何才能做到这一点？期望的结果是，解析树侦听器将获得文本值，如。 我尝试将写入单独的和中，但遇到https://gi