Question

我的问题类似于这篇文章，除了我仍然无法将输入文本显示为内联块 - ＆gt; inline-block overflowing outside container

我想要5个输入文本，我想将它们包装成：

＆＃34;项目1＆＃34;

＆＃34;项目2＆＃34; ＆＃34;项目3＆＃34;

＆＃34;项目4＆＃34; ＆＃34;项目5＆＃34;

我的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。但他们没有达到我的期望。

Answer 1

你可以这样试试 -

＆＃13;

#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%;*/
}

＆＃13;

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

＆＃13;

Answer 2

我更喜欢使用table来创建表单

<强>段

＆＃13;

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

＆＃13;

内联块溢出身体部分

2 个答案: