IONIC Angular 无自定义样式时ion-list分割线左右间距不一致是否正常

问题结论 #

该现象属于Ionic框架的默认设计，是正常情况。

原因说明 #

Ionic内置的<ion-item>组件默认分割线样式就是仅左侧预留和内容内边距匹配的留白，右侧默认贴合列表容器边缘，属于移动端列表的通用常规设计。
你代码中额外套了一层承载*ngFor的<div>也不会影响这个默认样式表现，不过从规范角度可以直接把*ngFor绑定到<ion-item>上，减少不必要的DOM节点：

<ion-list>
  <ion-item *ngFor="let s of getStories();">
    <ion-thumbnail>
      <img class="imgmg" src="https://via.placeholder.com/150x150">
    </ion-thumbnail>
    <ion-label class="ion-margin">
      <h2>卢克</h2>
      <h3>你的想法出卖了你</h3>
      <p>我能感受到你身上善良的一面，还有你内心的挣扎……</p>
    </ion-label>
  </ion-item>
</ion-list>

自定义调整方案 #

如果需要让分割线左右两侧都有对称留白，可以通过修改Ionic内置CSS变量实现，添加如下样式即可：

ion-item {
  /* 调整分割线右侧内边距，和左侧默认值保持一致即可实现对称效果 */
  --inner-border-end: 16px;
}

如果需要全局生效，把上述样式写入全局样式文件global.scss即可。

内容的提问来源于stack exchange，提问作者sascha.m