使用Ionic+Angular开发计算器时最后一行按钮对齐异常如何解决

问题原因 #

你的布局错乱核心有两个问题：

1. 数字1/2/3所在的第四行仅配置了3列，默认会撑满整行宽度，挤占了等号原本应占用的最右侧列位置
2. 双高的等号按钮没有配置列跨行属性，高度溢出后只会向下延伸，无法上移和上方的+号对齐

具体修改代码 #

1. HTML调整

<ion-content [fullscreen]="true">
  <div class="calc-main">
    <div class="calc-display">
      <ion-input type="number" [(ngModel)]="display" class="ion-text-end"></ion-input>
    </div>
    <ion-grid class="button-grid">
      <!-- Row 1 -->
      <ion-row>
        <ion-col size="3">
          <ion-button shape="round"   *ngIf="!isc" (click)="click('ac')" class="reset-button">AC</ion-button>
          <ion-button shape="round"   *ngIf="isc" (click)="click('c')" class="reset-button">C</ion-button>
        </ion-col>
        <ion-col size="3">
          <ion-button shape="round"  (click)="click('%')" class="operator-button">%</ion-button>
        </ion-col>
        <ion-col size="3">
          <ion-button shape="round"  (click)="click('/')" class="operator-button">/</ion-button>
        </ion-col>
        <ion-col size="3">
          <ion-button shape="round"  (click)="click('x')" class="operator-button">x</ion-button>
        </ion-col>
      </ion-row>
      <!-- Row 2 -->
      <ion-row>
        <ion-col size="3">
          <ion-button shape="round" (click)="click('7')" class="number-button">7</ion-button>
        </ion-col>
        <ion-col size="3">
          <ion-button shape="round" (click)="click('8')" class="number-button">8</ion-button>
        </ion-col>
        <ion-col size="3">
          <ion-button shape="round" (click)="click('9')" class="number-button">9</ion-button>
        </ion-col>
        <ion-col size="3">
          <ion-button shape="round" (click)="click('-')" class="operator-button">-</ion-button>
        </ion-col>
      </ion-row>
      <!-- Row 3 -->
      <ion-row>
        <ion-col size="3">
          <ion-button shape="round" (click)="click('4')" class="number-button">4</ion-button>
        </ion-col>
        <ion-col size="3">
          <ion-button shape="round" (click)="click('5')" class="number-button">5</ion-button>
        </ion-col>
        <ion-col size="3">
          <ion-button shape="round" (click)="click('6')" class="number-button">6</ion-button>
        </ion-col>
        <ion-col size="3">
          <ion-button shape="round" (click)="click('+')" class="operator-button">+</ion-button>
        </ion-col>
      </ion-row>
      <!-- Row 4 -->
      <ion-row>
        <ion-col size="3">
          <ion-button shape="round" (click)="click('1')" class="number-button">1</ion-button>
        </ion-col>
        <ion-col size="3">
          <ion-button shape="round" (click)="click('2')" class="number-button">2</ion-button>
        </ion-col>
        <ion-col size="3">
          <ion-button shape="round" (click)="click('3')" class="number-button">3</ion-button>
        </ion-col>
        <!-- 补空列占位，给等号留位置 -->
        <ion-col size="3"></ion-col>
      </ion-row>
      <!-- Row 5 -->
      <ion-row>
        <ion-col size="6">
          <ion-button shape="round"  (click)="click('0')" class="double-width">0</ion-button>
        </ion-col>
        <ion-col size="3">
          <ion-button shape="round"  (click)="click('.')" class="operator-button">.</ion-button>
        </ion-col>
        <!-- 配置等号列跨2行，设置对齐 -->
        <ion-col size="3" rowSpan="2" class="equal-col">
          <ion-button shape="round" (click)="click('=')" class= "double-height">=</ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
</ion-content>

2. CSS调整

.calc-main {
  background-color: #ad0fc2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.calc-display {
  background-color: #ad0fc2;
  padding: 60px 15px 20px;
  width: 250px;
}

ion-input {
  color: #ffffff;
  font-size: 48px;
}

ion-col {
  padding: 8px 4px;
  margin: 0;
  display: flex;
  justify-content: center;
}

ion-button {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  font-size: 20px;
}
.button-grid {
  height: auto;
  width: 250px;
}

.double-width {
  width: 100px;
}

.double-height {
  height: 100px;
}

.equal-col {
  align-items: flex-start;
}

调整说明 #

• 给所有列显式指定size属性，基于Ionic默认12列栅格系统，每列宽度固定，不会自动拉伸
• 第四行补全最右侧空列占位，确保数字1/2/3不会挤占等号的位置
• 等号所在列添加rowSpan="2"属性跨两行，同时设置列对齐为顶部对齐，实现等号上移和上方+号对齐的效果
• 修复了border-radius属性值错误，圆形按钮需要设为50%
• 调整了列内边距和居中对齐，所有按钮会在列内自动居中

内容的提问来源于stack exchange，提问作者Warfujjii