我写了以下代码:
<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%;
}
目前,代码添加了选择框。如果有多个对象,它会显示一个框,用户可以选择无、A 或 B。 如果只有一个对象,它将添加一个框,允许使用 None 或 NOT。 我要实现的功能是在第一个框旁边添加第二个框(无/不),以防有多个对象,因此 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>
但我遇到的问题是更改 CSS。我尝试更改的每个属性都会导致奇怪的行为(框不在其位置)。我不确定我应该进行哪些更改才能按预期工作(两个盒子一个接一个)。希望听到一些关于该做什么的指南。
最佳答案
我不确定您首先是否真的需要这些 div,但也许您需要这些 div 是为了您打算做的其他事情,这超出了这个问题的范围。此外,如果没有看到源代码的其余部分(例如负边距),您的许多 CSS 似乎都是不必要的。因此,为了简单起见,我将忽略所有这些。
要将包含您选择的两个 div 放在同一行上,只需使用 float: left
将它们 float ,如下例所示:
.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>
关于html - 并排显示两个选择框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59331310/