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

Question

JSFiddle

HTML：

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

CSS：

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

我想知道是否有一個純CSS的方法來修改輸入元素的寬度，調整到左的可用空間。

謝謝。

Answer 1

作爲純粹的CSS解決方案，您可以用容器<div>環繞<input>，並用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