インラインブロックオーバーフロー本体部

Question

私の質問は、私はまだインラインブロックとして入力されたテキストを表示するには、問題が発生した以外、この記事に似ている - > inline-block overflowing outside container

私は5つの入力テキストを持って欲しいと私はしたいです

"アイテム2" "項目3"

"項目4" "項目5"

"項目1"：のようにそれらをラップします3210私の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> 

マイCSS：テーブル、位置：絶対と表示：インラインフレックス

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

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

私はまた、ディスプレイを試してみました。しかし、彼らは私の期待に応えていません。

Answer 1

あなたはこのように試すことができます -

#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

私は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>

をフォームを作成するためのテーブルを使用して好みます