内联块溢出正文部分答案

【问题标题】：inline-block overflow the body section内联块溢出正文部分
【发布时间】：2017-06-01 07:42:19
【问题描述】：

我的问题与这篇文章类似，但我仍然无法将输入文本显示为 inline-block --> inline-block overflowing outside container

我想要 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%;
       ....
    }
}

我也试过 display: table, position: absolute 和 display: inline-flex。但他们没有达到我的期望。

【问题讨论】：

标签： html css input containers display

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：