如何使输入元素占据所有剩余的水平空间？

  • Z时代
  • 2024-01-10
  • 分类：问答

这是代码：

<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：块的输入框扩展到其容器的大小

以上是 如何使输入元素占据所有剩余的水平空间？ 的全部内容， 来源链接： utcz.com/qa/406372.html

回到顶部