はCSS

Question

で残りのスペースを埋めるI持って、次の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> 

それが持つ残りのスペースを埋めるために、（私はこれのためにJavaScriptを使用したくない）CSSで可能です入力？可変ラベルの長さがあり、入力の右側をfloat: rightなしで揃えたい（ただし、左揃えも気にする必要はありません）。

Answer 1

あなたはlabelflex親を作り、input

#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>