Ionic Footer与Toolbar右侧多余间距去除方案咨询

安全阿岳

2026-7-28

我在ion-footer内的ion-toolbar中创建了一个全宽按钮，代码如下：

<ion-footer class="ion-no-border">
  <ion-toolbar style="--background:white">
    <ion-buttons>
      <ion-button (click)="continue()" color="secondary" fill="solid" class="sb-block-button">Save</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

但footer右侧存在一处间隙，想要去除该间隙却未能成功，效果显示按钮右侧未完全贴合footer边缘。

解决方法：

移除ion-buttons容器：ion-buttons组件默认带有右侧内边距，直接将按钮放在ion-toolbar下即可消除间隙：

<ion-footer class="ion-no-border">
  <ion-toolbar style="--background:white">
    <ion-button (click)="continue()" color="secondary" fill="solid" class="sb-block-button">Save</ion-button>
  </ion-toolbar>
</ion-footer>

清除ion-buttons的内边距/外边距：如果需要保留ion-buttons，可以通过CSS覆盖默认样式：
```
ion-toolbar ion-buttons {
  margin-right: 0;
  padding-right: 0;
}
```
确保按钮宽度为100%：检查自定义类sb-block-button是否设置了全宽，若没有则添加：
```
.sb-block-button {
  width: 100%;
}
```