Question

我创建了一个离子页面，该页面使用<ion-grid>在两行上放置数字1-10。单击后，单击的数字的<span>变为深蓝色，表示已选择。

在添加float: right之前，当进行此选择时，它将仅围绕数字形成一个椭圆形的狭窄区域。在添加float: right之后，单击的数字被圆包围，在边缘和数字之间应留有足够的空间。但是，浮动元素现在正在影响网格，并将其移至页面右侧。

如何在网格居中的位置进行此项工作，但是单击时数字不会移位？

我创建了一个StackBlitz for this issue。

Answer 1

这只是简单的CSS问题。跨度不是块级元素。在跨度上设置display: block;以获取正确的蓝色圆圈，并根据需要将margin: 0 auto;设置为跨度在网格元素中居中。不需要浮子。

Forked your stackblitz

Answer 2

使用div和display属性设置包含网格的justify-content。这会使项目间隔太近。因此，请使用项目的填充。

您的CSS应该如下所示：

page-home {

  ion-col span {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    float: right;
    position: relative;
  }

  .selected {
    color: #fff;
    background: #005189;
    float: right;
    position: relative;
  }
.col{
  padding: 15px;
}
.centered-grid{
  text-align: center;
  display:grid;
  justify-content:center;
}
}

将类centered-grid添加到包含网格的div中。

    <div class="centered-grid">
        <ion-grid>
          <ion-row *ngFor="let row of priority.options">
            <ion-col *ngFor="let number of row.priority" (click)="selectPriority($event)">
              <span [ngClass]="{'selected': selectedPriority == number.number}">{{number.number}}</span>
            </ion-col>
          </ion-row>
        </ion-grid>
    </div>

使用跨度将数字环绕成一个圆

2 个答案: