html - 是否可以仅使用 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