Question

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

ChartPicker

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

GranularityPicker

<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的组件位于页面的左侧：

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

图表选择器在粒度之前，两个类的CSS在右侧有一些边距，而浮动：右边。

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

这绝对没有意义。我尝试将其改为CSS并不重要...它只是不起作用。关于如何解决这个问题的任何想法？

Answer 1

这两个元素都有float:right。浮点数按文档顺序计算，因此第一个元素最终一直向右浮动，然后第二个元素浮动在第一个元素旁边，使它们处于“错误”顺序。您可能希望使用内联或内联块元素而不是浮动。

.r {float:right}

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

不可能在另一个的左边获得一个Angular组件

1 个答案: