css - 无法在另一个组件的左侧获得 Angular 组件

Question

简单的问题，但可能很难回答。我正在做一个具有多个组件的 Angular 5 应用程序。这是其中的两个:

图表选择器

<div>
   <span>
    <div class="btn-group btn-group-small" *ngIf="available_charts.chart_types.length > 1">
        <label *ngFor="let type_key of available_charts.chart_types" class="btn btn-default active" [class]="type_key.name == available_charts.chart_types.selected ? 'active' : ''" (click)="available_charts.selected = type_key.name">
            <i class="fa fa-bar-chart" aria-hidden="true"></i>
      </label>
    </div>
  </span>
</div>

粒度选择器

<div>
  <span>
      <select [(ngModel)]="config.granularity.selected">
        <option [selected]="false" *ngFor="let option of config.granularity.available" [ngValue]="option">
          <span class="option-txt"> {{option}} </span>
        </option> 
      </select> 
  </span> 
</div>

两者都很简单……对吧？好吧，我像这样将它们放在应用程序中，另一个组件称为段，它位于页面的左侧:

<segments [config]="config"></segments>
<chart-picker [config]="config" class="chart-picker"></chart-picker>
<granularity [config]="config" class="granularity-picker"></granularity>

Chart-picker在granularity之前，两个类的CSS都有一些右边距，还有一个float:right。

...但是图表选择器，应该是第一个，出现在最后一个，在粒度的右侧。

这完全没有意义。不管我试图改变它的 CSS 是什么……它就是行不通。关于如何解决此问题的任何想法？

Answer 1

两个元素都有float:right。 float 是按文档顺序计算的，所以第一个元素最终一直 float 到右边，然后第二个元素紧挨着第一个 float ，使它们处于“错误”的顺序。您可能希望在此处使用内联或内联 block 元素而不是 float 元素。

.r {float:right}

<div class="r">First</div>
<div class="r">Second</div>