离子 - 更改项目内容的位置

Question

我有一个看起来像这样的ion-item：

我想把item-content div 多放在左边：

问题：正确更改值的正确 sass 变量是什么？我怎样才能实现item-content 在每个ion-item 中独立于标签长度以相同的方式对齐？

我的代码：

  <ion-list no-lines>

    <ion-item-sliding  *ngFor="let event of events">
        <ion-item (click)="showEvent(event)">
           <ion-label>
             <h2>Projekt:</h2>
             <h2>Ort:</h2>
             <h2>Wetter:</h2>
             <h2>Wind:</h2>
             <h2>Temperatur:</h2>
           </ion-label>

           <div item-content>
             <h2>{{event.project}}</h2>
             <h2>{{event.place}}</h2>
             <h2>{{event.weatherMain}}, {{event.averageTemp}}°C</h2>
             <h2>{{event.windSpeed}} m/s</h2>
             <h2>{{event.averageTemp}}</h2>
           </div>

         </ion-item>

      <ion-item-options>
        <button ion-button icon-only color="primary" (click)="deleteEvent(event)">
          <ion-icon name="trash"></ion-icon>
        </button>
      </ion-item-options>
    </ion-item-sliding>

  </ion-list>

CSS：

  .scroll-content {
      background-color: #ecf0f1;
      display: flex !important;
      justify-content: center;
    }

    ion-list {
      width: 90%;
    }

    ion-item-sliding {
      margin-top: 20px;
      border-radius: 20px;
    }

    ion-item {
      border: none !important;
      font-weight: bold !important;
    }

Answer 1

您可以尝试更改以下 sass 变量

$item-md-padding-end, $item-ios-padding-end

它们在

中设置为 16px

/src/themes/ionic.theme.<dark|default>.<ios|md|wp>.scss