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

小编典典

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

css

这是代码：

<div style="width:400px">
    some text..
    <input type="text" />
    <button value="click me" />
</div>

如何在保持同一行的同时使输入元素扩展为填充所有剩余空间？如果我100％投入，它会走自己的线…

阅读 463

2020-05-16

共1个答案

小编典典

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

2020-05-16