離子段落在離子項目按鈕中為單行

Question

我得到了followintg html：

<button ion-item (click)="doSome()" style="margin-left: 72px; display: block; padding-left: 0" >
    <div padding-left style="display: block">
        <h6>Function</h6>
        <p>{{user.function}} </p>

        <h6 padding-top>About</h6>
        <p>{{user.about}}</p>

        <h6 padding-top>Task</h6>
        <p>{{user.task}}</p>
    </div>
</button>

結果如下：

我發現一個ion-item指令導致了這種情況。 我怎樣才能解決這個問題？

EDIT1：更多信息

我正在尋找的結果是這樣的：

是手風琴觀點。 基本上，它是一個列表，每個項目都有手風琴組件。 在手風琴中，我有上面的html。 因為我希望手風琴中的物品可以被波紋效果點擊，所以它必須是<button ion-item></button>

手風琴：

export class AccordionComponent {

  @Input('expanded') expanded = false;

  constructor() {

  }

  toggle(){
    this.expanded = !this.expanded;
  }
}

簡單的手風琴html：

<div *ngIf="expanded" @ngIfAnimation>
  <ng-content></ng-content>
</div>

編輯2：
任何具有可擴展列表項的解決方案都可以。 列表項和擴展列表項都需要波紋效果。

Answer 1

請改用離子卡。 您還可以將點擊事件附加到卡片上

<ion-card (click)="functionName()">
  <h6>Function</h6>
    <p>{{user.function}} </p>

    <h6 padding-top>About</h6>
    <p>{{user.about}}</p>

    <h6 padding-top>Task</h6>
    <p>{{user.task}}</p>
</ion-card>

Answer 2

這應該做多行段落。

<button ion-item (click)="doSome()" style="margin-left: 72px; display: block; padding-left: 0" >
<div padding-left style="display: block">
    <h6>Function</h6>
    <p text-wrap>{{user.function}} </p>

    <h6 padding-top>About</h6>
    <p text-wrap>{{user.about}}</p>

    <h6 padding-top>Task</h6>
    <p text-wrap>{{user.task}}</p>
</div>

當不嘗試在button標簽中換行時