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简单地将它们浮动，如以下示例所示：

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

并排显示两个选择框

1 个答案: