フラッシュ/ Iは以下のコードを持って互いに

Question

とラベルと入力を揃えますこの絵のように同じスペース）を持つ：

どのように私はこれがいい、スマートな方法で行うことができますか？

ありがとうございました&歓声。

Answer 1

フィドル https://jsfiddle.net/sesn/bq3gjeug/

CSSであなたの答えです：

.groups { 
    display: flex; 
    width: 100%; 
} 

.group { 
    display: flex; 
    flex-direction: column; 
    margin-right:20px; 
} 
.group:last-child { margin-right: 0px; } 
.group label { display: block; min-width: 100px; font-size: 12px; margin-bottom: 5px; } 
.group input { max-width: 100px; float: right;margin-left: 10px;} 

Answer 2

幅が小さすぎると機能しません。そうでないと機能しません。ここで

.groups { 
 
    display: flex; 
 
    width: 100%; 
 
} 
 

 
.group { 
 
    display: flex; 
 
    flex-direction: column; 
 
    margin-right: 30px; 
 
} 
 
.group:last-child { 
 
    margin-right: 0 
 
} 
 
.group > label { 
 
    margin-bottom: 10px 
 
} 
 
.group p { 
 
    display: inline-block; 
 
    width: 110px; 
 
    margin: 0; 
 
}

<div class="groups"> 
 
    <div class="group"> 
 
    <label><p>Frist given name</p> 
 
     <input type="text"> 
 
    </label> 
 
     
 
    <label><p>Surname</p> 
 
     <input type="text"> 
 
    </label> 
 
    
 
    <label><p>City</p> 
 
     <input type="text"> 
 
    </label> 
 
    </div> 
 
    
 
    <div class="group"> 
 
    <label><p>Text 1</p> 
 
     <input type="text"> 
 
    </label> 
 
     
 
    <label><p>Bla bla bla</p> 
 
     <input type="text"> 
 
    </label> 
 
    
 
    <label><p>My dummy-label</p> 
 
     <input type="text"> 
 
    </label> 
 
    </div> 
 
    
 
    <div class="group"> 
 
    <label><p>Hello, I'm a label</p> 
 
     <input type="text"> 
 
    </label> 
 
     
 
    <label><p>Labelname</p> 
 
     <input type="text"> 
 
    </label> 
 
    
 
    <label><p>Test-label</p> 
 
     <input type="text"> 
 
    </label> 
 
    </div> 
 
</div>

Answer 3

.groups { 
 
    display: flex; 
 
    width: 100%; 
 
} 
 

 
.group { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
p{ 
 
    float: left; 
 
    margin: 0px 15px; 
 
    width: 118px; 
 
} 
 
label{ 
 
    margin-bottom:15px; 
 
}

<div class="groups"> 
 
    <div class="group"> 
 
    <label><p>Frist given name</p> 
 
     <input type="text"> 
 
    </label> 
 
     
 
    <label><p>Surname</p> 
 
     <input type="text"> 
 
    </label> 
 
    
 
    <label><p>City</p> 
 
     <input type="text"> 
 
    </label> 
 
    </div> 
 
    
 
    <div class="group"> 
 
    <label><p>Text 1</p> 
 
     <input type="text"> 
 
    </label> 
 
     
 
    <label><p>Bla bla bla</p> 
 
     <input type="text"> 
 
    </label> 
 
    
 
    <label><p>My dummy-label</p> 
 
     <input type="text"> 
 
    </label> 
 
    </div> 
 
    
 
    <div class="group"> 
 
    <label><p>Hello, I'm a label</p> 
 
     <input type="text"> 
 
    </label> 
 
     
 
    <label><p>Labelname</p> 
 
     <input type="text"> 
 
    </label> 
 
    
 
    <label><p>Test-label</p> 
 
     <input type="text"> 
 
    </label> 
 
    </div> 
 
</div>