ion-fab 按钮与其他离子组件重叠

Question

我正在使用 ion-fab 列表来保存 ion-fab 按钮，但问题是 ion-fab 按钮与 ion-list（下面的日期选择器）/ion-button 重叠，无论应用内联边距样式、ion-item-分隔线、CSS 外部样式等

如何将 ion-fab 内容分离为正上方和正下方的内容？

这是造型：

<!--End Date Pciker-->
    <ion-list >
      <ion-accordion-group >
        <ion-accordion #myAccordion value="start">
          <ion-item slot="header">
            <ion-label >End Date</ion-label>
            <ion-note slot="end" id="datetimeValue">{{selectedEndDate | date: 'dd/MM/yyyy'}}</ion-note>
          </ion-item>
          <ion-datetime
            id="datetime"
            displayFormat="dd/MM/yyyy"
            slot="content"
            presentation="date"
            min="01-01-1980"
            max="31-01-2100"
            
            [(ngModel)]="selectedEndDate"
            name="selectedEndDate"
           
          ></ion-datetime>
        </ion-accordion>
      </ion-accordion-group>
    </ion-list>


<!-- Button for Capturing Photo , try ion-fab first-->

<ion-item-divider></ion-item-divider>

<ion-fab vertical="center" horizontal="center" slot="fixed">get cert 
  <ion-fab-button (click)="getCertficatePhoto()">
    <ion-icon name="camera"></ion-icon>
  </ion-fab-button>
</ion-fab>



    <ion-button style="margin-top: 20px;" fill="outline" expand="block"
    color="primary" type="submit">{{editEvent ? 'Update' : 'ADD'}}</ion-button>
      </form>

  </ion-content>

Answer 1

使用 ion-fab 标签并仅使用 ion-fab-button。当然，你需要对其进行风格化。