flush/align Etikett und Eingang miteinander

Ich habe Folgecode:flush/align Etikett und Eingang miteinander

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

 
.group { 
 
    display: flex; 
 
    flex-direction: column; 
 
}

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

Ich mag Etiketten und Eingänge miteinander (Etikett auf der linken Seite des Eingangs spülen mit dem gleichen Raum) wie in diesem Bild:

Wie kann ich tun dies auf eine schöne, intelligente Art und Weise?

Danke & Prost.

Quelle

2016-06-16 MrBuggy

Hier ist Ihre Antwort in Geige 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;}

Quelle

2016-06-16 09:33:28 SESN

Dies ist die Lösung, die ich gesucht habe, danke. Ich habe deine Fidel editiert und 'margin-bottom: 10px' an das Label gegeben und dann war es genau das Alignement, nach dem ich gesucht habe. Prost. – MrBuggy

Hier ist die bearbeitete Fiddle: https://jsfiddle.net/bq3gjeug/2/ – MrBuggy

Ich habe auch bearbeitet nach: https://jsfiddle.net/sesn/bq3gjeug/1/ – SESN

Nicht funktionieren, wenn die Breite zu klein ist, sonst wird es funktionieren.

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

Quelle

2016-06-16 09:32:44

Hallo und danke für deine Antwort. Das Einzige, das hier dünn ist, ist, dass ich nicht das Wort Bremse auf meinen Etiketten haben will, weil es nicht auf der gleichen Linie ist. – MrBuggy

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

Quelle

2016-06-16 09:42:28

flush/align Etikett und Eingang miteinander

Antwort

Verwandte Themen