在 ion-item 内堆叠元素答案

【问题标题】：Stack elements under each other inside ion-item在 ion-item 内堆叠元素
【发布时间】：2019-01-23 00:45:30
【问题描述】：

我正在尝试在一个 ion-item 内垂直堆叠项目：

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

【问题讨论】：

标签： angular css ionic-framework ionic3

【解决方案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>

【讨论】：