填充剩餘空間CSS

Question

我有以下的HTML（JSFiddle）：

<div id="container"> 
    <div> 
    <label>Simple label 
     <input> 
    </label> 
    </div> 
    <div> 
    <label>Other label 
     <input> 
    </label> 
    </div> 
    <div> 
    <label>Variable label 
     <input> 
    </label> 
    </div> 
</div> 

是否有可能利用CSS（我不想使用JavaScript爲這個），以填補該剩餘空間投入？我有可變的標籤長度​​，並且我想對齊輸入的右側而不用float: right（但不要打擾左側對齊）。

Answer 1

可以使label一個flex家長和設置input到flex-grow: 1

#container div { 
 
    margin: 10px 0; 
 
    width: 300px; 
 
} 
 

 
input { 
 
    flex-grow: 1; 
 
} 
 

 
label { 
 
    display: flex; 
 
}

<div id="container"> 
 
    <div> 
 
    <label>Simple label 
 
     <input> 
 
    </label> 
 
    </div> 
 
    <div> 
 
    <label>Other label 
 
     <input> 
 
    </label> 
 
    </div> 
 
    <div> 
 
    <label>Variable label 
 
     <input> 
 
    </label> 
 
    </div> 
 
</div>