html - 并排显示两个选择框

Question

我写了以下代码:

  <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。我尝试更改的每个属性都会导致奇怪的行为(框不在其位置)。我不确定我应该进行哪些更改才能按预期工作(两个盒子一个接一个)。希望听到一些关于该做什么的指南。

Answer 1

我不确定您首先是否真的需要这些 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>