html - HTML - 並排顯示兩個選擇框

我編寫了以下代碼:


 <div class="selectAorB" *ngIf="this.objects.length > 1">


 <div>


 <select (change)="this.AorB($event)">


 <option value="None" >None</option>


 <option value="A" >A</option>


 <option value="B" >B</option>


 </select>


 </div>


 </div>


 <div class="selectNOT" *ngIf="this.objects.length == 1">


 <div>


 <select (change)="this.notChange($event)">


 <option value="None" >None</option>


 <option value="NOT" >NOT</option>


 </select>


 </div>


 </div>



CSS:


.selectAorB{


 width: 50px;


 margin-left: 370px;


 margin-top: -41px;


 border: 1px solid rgba(88, 109, 140, 0.5);


 border-radius: 4px;


 padding: 3px;


}



.selectAorB select{


 display: block;


 width: 50px;


 background-image: url('../../../assets/icons/select_arrow.png');


 background-repeat: no-repeat;


 background-position: right center;


 border: none;


 -webkit-appearance: none;


 -moz-appearance: none;


 overflow:hidden;


 color: #1A3763;


 font-family: Roboto, Arial, Helvetica, sans-serif;


 font-weight: normal;


 Opacity: 70%;


}



.selectNOT{


 width: 50px;


 margin-left: 370px;


 margin-top: -41px;


 border: 1px solid rgba(88, 109, 140, 0.5);


 border-radius: 4px;


 padding: 3px;


}



.selectNOT select{


 display: block;


 width: 50px;


 background-image: url('../../../assets/icons/select_arrow.png');


 background-repeat: no-repeat;


 background-position: right center;


 border: none;


 -webkit-appearance: none;


 -moz-appearance: none;


 overflow:hidden;


 color: #1A3763;


 font-family: Roboto, Arial, Helvetica, sans-serif;


 font-weight: normal;


 Opacity: 70%;


}



我要實現的功能是在第一個框旁邊添加第二個框,以防存在多個對象,因此HTML應該如下所示:


 <div class="selectAorB" *ngIf="this.objects.length > 1">


 <div class="selectNOT" *ngIf="this.status == 'NOT'">


 <div>


 <select (change)="this.notChange($event)">


 <option value="None" >None</option>


 <option value="NOT" >NOT</option>


 </select>


 </div>


 <br>


 </div>


 <div>


 <select (change)="this.AorB($event)">


 <option value="None" >None</option>


 <option value="A" >A</option>


 <option value="B" >B</option>


 </select>


 </div>


 </div>


 <div class="selectNOT" *ngIf="this.objects.length == 1">


 <div>


 <select (change)="this.notChange($event)">


 <option value="None" >None</option>


 <option value="NOT" >NOT</option>


 </select>


 </div>


 </div>



时间: 原作者:

要使包含你選擇的兩個div在同一行上,只需使用float: left將它們浮動,如下面的示例所示:


.inline {


 float: left;


 margin-right: 5px;


}

 <div class="selectAorB inline">


 <div>


 <select>


 <option value="None" >None</option>


 <option value="A" >A</option>


 <option value="B" >B</option>


 </select>


 </div>


 </div>


 <div class="selectNOT inline">


 <div>


 <select>


 <option value="None" >None</option>


 <option value="NOT" >NOT</option>


 </select>


 </div>


 </div>

原作者:
...