是否可以僅使用CSS動態設置輸入元素的寬度？

Question

HTML：

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

CSS：

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

我想知道是否有一種純CSS方式來修改輸入元素的寬度，以適應剩余的可用空間。

謝謝。

Answer 1

作為純CSS解決方案，您可以用容器<div>包裹<input> ，並用overflow-x: hidden;框的水平溢出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; }