是否可以仅使用CSS动态设置输入元素的宽度？

Question

JSFiddle

HTML：

<div>
    abc
    <input />
</div>

CSS：

div {
    width:80%;
    background-color:yellow;
}
input {
    width:90%;
}

我想知道是否有一种纯CSS方式来修改输入元素宽度，调整到剩余的可用空间。

感谢。

Answer 1

作为纯CSS解决方案，您可以使用<input>包围<div>并使用overflow-x: hidden;隐藏框的水平溢出。

然后使用<label>元素将文本浮动到左侧：

HTML：

<label>abc</label>
<div class="wrapper">
    <input />
</div>

<强> CSS：

.wrapper { overflow-x: hidden; }
label { float: left; }
input { width:100%; box-sizing: border-box; }

<强> JSFiddle Demo