débordement inline-block de la section du corps

Question

Ma question est semblable à ce poste, sauf que j'avoir encore du mal à afficher le texte d'entrée comme inline-block -> inline-block overflowing outside container

Je veux avoir 5 textes d'entrée et je veux pour les envelopper comme:

"Point 1"

"Point 2" "3 Item"

"article 4" "Point 5"

Mon HTML:

<div class="form"> 
    <div id="inputs"> 
     <label> Email </label> 
     <div> 
      <input type="text" [(ngModel)]="email" maxlength="100"> 
     </div> 
     <label> Address </label> 
     <div> 
      <input type="text" [(ngModel)]="address" maxlength="50"> 
     </div> 
      ..... 
    </div> 
</div> 

Mon CSS:

#inputs { 
    display: inline-block; 
    vertical-align: top; 
    label { 
     .... 
    } 

    div { 
    width: 100%; 
     .... 
    } 
} 

J'ai aussi essayé d'affichage: table, position: absolute et display: inline-flex. Mais ils ne répondent pas à mes attentes.

Answer 1

Vous pouvez essayer comme ça -

#inputs .frmField{ 
 
    float: left; 
 
    vertical-align: top; 
 
} 
 
#inputs .frmField:nth-child(2), #inputs .frmField:nth-child(4){ 
 
    clear: both 
 
} 
 
label { 
 
    display: block; 
 
} 
 
div { 
 
    /*width: 100%;*/ 
 
}

<div class="form"> 
 
    <div id="inputs"> 
 
     <div class="frmField"> 
 
     \t <label> Email 1</label> 
 
      <input type="text" [(ngModel)]="email" maxlength="100"> 
 
     </div> 
 
     <div class="frmField"> 
 
     \t <label> Address 2</label> 
 
      <input type="text" [(ngModel)]="address" maxlength="50"> 
 
     </div> 
 
     <div class="frmField"> 
 
     \t <label> Address 3</label> 
 
      <input type="text" [(ngModel)]="address" maxlength="50"> 
 
     </div> 
 
     <div class="frmField"> 
 
     \t <label> Address 4</label> 
 
      <input type="text" [(ngModel)]="address" maxlength="50"> 
 
     </div> 
 
     <div class="frmField"> 
 
     \t <label> Address 5</label> 
 
      <input type="text" [(ngModel)]="address" maxlength="50"> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

Je préfère utiliser la table pour créer la forme

SNIPPET

<h1>A FORM</h1> 
 
<table class="form"> 
 
    <tbody id="inputs"> 
 
     <tr> 
 
      <td><label> Email </label><td> 
 
      <td><input type="text" [(ngModel)]="email" maxlength="100"></td> 
 
     </tr> 
 
     <tr> 
 
      <td><label> Address </label><td> 
 
      <td><input type="text" [(ngModel)]="email" maxlength="100"></td> 
 
     </tr> 
 
     <tr> 
 
      <td><label> Address </label><td> 
 
      <td><input type="text" [(ngModel)]="email" maxlength="100"></td> 
 
     </tr> 
 
     <tr> 
 
      <td><label> Address </label><td> 
 
      <td><input type="text" [(ngModel)]="email" maxlength="100"></td> 
 
     </tr> 
 
     <tr> 
 
      <td><label> Address </label><td> 
 
      <td><input type="text" [(ngModel)]="email" maxlength="100"></td> 
 
     </tr> 
 
    </tbody> 
 
</table>