CSS移动按钮到右边

Question

我在UI中使用了bootstrap和angular材质。在我的一个div中，我想把按钮移到右边但是当我应用class "float-right"它在另一个div后面。这是图像URL https://prnt.sc/y0xn90代码如下:

<div class="card-body">
<div class="tab-content">
<!-- /.tab-pane -->
<div class="active tab-pane" id="timeline">
<div>
<button mat-raised-button color="primary">Add Treatment</button>
</div>
<div>
<ul class="timeline" *ngFor="let treatment of patientTreatments">
<li class="timeline-item bg-white rounded ml-3 p-4 shadow">
<div class="timeline-arrow"></div>
<h2 class="h5 mb-0">{{treatment.title}}<span class="float-right" style="cursor: pointer;">
<mat-icon>edit</mat-icon>
</span></h2>
<span class="small text-gray"><i class="fa fa-clock-o mr-1"></i>{{treatment.treatmentDate}}</span>
<p class="text-small mt-2 font-weight-light">{{treatment.summary}}</p>
<div *ngFor="let files of treatment.treatmentFiles">
<img src="" alt="Treatment image">
</div>
</li>
</ul><!-- End -->
</div>
<!-- The timeline -->
</div>
<!-- /.tab-pane -->
<div class="tab-pane" id="settings">
111
</div>
<!-- /.tab-pane -->
</div>
<!-- /.tab-content -->
</div><!-- /.card-body -->

Answer 1

你可以使用display flex属性设置width为100%，你可以使用flex-end/flex-start设置left或right side

<div style="width: 100%;display: flex;justify-content: flex-end;align-items: center;">
<button mat-raised-button color="primary">Add Treatment</button>
</div>