内联块溢出body部分

Question

我的问题与这篇文章相似，除了我仍然很难将输入文本显示为inline-block ->>内联块溢出外部容器

我想要5个输入文本，我想像以下方式包装它们：

"项目1"

"项目2"项目3"

"项目4"项目5"

我的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">
        	<label> Email 1</label>
            <input type="text" [(ngModel)]="email" maxlength="100">
        </div>
        <div class="frmField">
        	<label> Address 2</label>
            <input type="text" [(ngModel)]="address" maxlength="50">
        </div>
        <div class="frmField">
        	<label> Address 3</label>
            <input type="text" [(ngModel)]="address" maxlength="50">
        </div>
        <div class="frmField">
        	<label> Address 4</label>
            <input type="text" [(ngModel)]="address" maxlength="50">
        </div>
        <div class="frmField">
        	<label> Address 5</label>
            <input type="text" [(ngModel)]="address" maxlength="50">
        </div>
    </div>
</div>

Answer 2

我更喜欢使用表创建表格

代码

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