我想在离子卡中彼此相邻显示图像

Question

>我目前有一张离子卡，里面有来自JSON对象的图片。我想让图片彼此相邻。在屏幕截图中，您可以看到我想要的内容。这就是我想要的：https://gyazo.com/ae64a28f3b6f471a063eb43fed7fb535

这是我所拥有的：https://gyazo.com/942431243bf9db75b5bf8d945bb36ce2

有3张图片，但你看不到它。

 <ion-header>
  <ion-navbar color ="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Amcik</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-searchbar>
</ion-searchbar>
  <ion-grid>
    <ion-row>
      <ion-col col-12 col-md *ngFor="let item of items">
        <ion-card>
          <ion-item>
            <h2>{{ item.name }}</h2>
            <p>{{ item.count }} leerlingen</p>
            </ion-item>
            <ion-item *ngFor="let i of item.items">
           <ion-avatar>
             <img src="{{i.avatar}}">
           </ion-avatar>
         </ion-item>
        </ion-card>
      </ion-col>
    </ion-row>
</ion-grid>
</ion-content>

Answer 1

在这里，<ion-item>和<ion-avatar>的 css 也会产生影响。所以，我认为你应该使用自己的<div>。喜欢这个：

取而代之的是：

<ion-item *ngFor="let i of item.items">
    <ion-avatar>
        <img src="{{i.avatar}}">
    </ion-avatar>
</ion-item>

使用这个：

<div style="display: inline-block;" *ngFor="let i of item.items">
    <img src={{i.avatar}}>
</div>

解决方案是使用/尝试 css 属性的值 display .喜欢display: inline-block.