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>

目前，代码添加了选择框。如果有多个对象，它将显示一个框，用户可以选择无，a或B。 如果只有一个对象，它将添加一个框，该框允许使用或不使用任何对象。 我尝试实现的功能是在第一个框旁边添加第二个框（无/无），以防有多个对象，因此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>

没有一个
不


没有一个
A.
B
没有一个
不

---

但是我的问题是改变CSS。我试图改变的每个属性都会导致奇怪的行为（盒子不在它们的位置）。我不确定我应该做哪些更改，以便它能够按预期工作（一个接一个的两个框）。希望听到一些关于做什么的指导。

我不确定你是否真的需要这些div，但也许你需要这些div来做一些你不想做的事情。此外，如果看不到源代码的其他部分（如负边距），那么许多CSS似乎是不必要的。因此，为了简单起见，我将忽略所有这些

要将包含所选内容的两个div放在同一行上，只需使用

float:left

将它们浮动，如以下示例所示：

.inline{
浮动：左；
右边距：5px；
}

没有一个
A.
B
没有一个
不

谢谢。我是否应该更改

selectAorB

和

selectNOT

？他们定义了mergin和padding？当然，继续吧，保留它们。在没有其他源代码的情况下，负边距导致div在屏幕外渲染，因此我删除了这些样式。如果你确定你想要这些边距和其他东西，那么你就可以保持其余的边距和其他东西不变，只需添加浮点数就可以将元素放在同一行上。但是看起来你仍然在使用它们。我保留了类名，但删除了CSS

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