angular - 在 ion-item 中将元素堆叠在一起

Question

我试图在 ionic 元素中将元素垂直堆叠在彼此之下:

<ion-item>    
  <ion-item-divider style="width: 100%;" item-content>
    <h4>Questions</h4>
  </ion-item-divider>
  <ion-item item-content style="width: 100%;" class="no-border">
    <label style="width: 100%;" item-content>This is a label</label>
  </ion-item>
  <ion-toolbar style="width: 100%;" item-content class="transparent-toolbar" text-center>
    <button ion-button icon-only type="button">
      <ion-icon name="add"></ion-icon>
    </button>
    <button ion-button icon-only type="button" >
      <ion-icon name="trash"></ion-icon>
    </button>
  </ion-toolbar>
</ion-item>

但是它不起作用，输出如下所示:

这是一个 STACKBLITZ这说明了问题。

Answer 1

使用 <ion-list>为此。

在 上演示 Stackblitz

<ion-list>
    <ion-item-divider style="width: 100%;" item-content>
        <h4>Questions</h4>
    </ion-item-divider>
    <ion-item item-content style="width: 100%;" class="no-border">
        <label style="width: 100%;" item-content>This is a label</label>
    </ion-item>
    <ion-toolbar style="width: 100%;" item-content class="transparent-toolbar" text-center>
        <button ion-button icon-only type="button">
            <ion-icon name="add"></ion-icon>
        </button>

        <button ion-button icon-only type="button">
            <ion-icon name="trash"></ion-icon>
        </button>
    </ion-toolbar>
</ion-list>