Question

最近我一直在为此苦苦挣扎，因此我终于决定将其发布在此处寻求帮助。

下图显示了我现在得到的。我有一个离子卡（红色），内部有一个离子网格（蓝色），其中有6个离子行，最后两个离子行包含3个离子束（绿色）。

没有为任何属性指定宽度（除了具有col-4属性的ion-cols），最后两行占据了离子网格的整个宽度... I想实现两件事：

对于后两行以适合其内容（即，所有列的内容宽度最长的单元格）；接着，得到的网格现在比离子卡的宽度短一个宽度，并将其水平居中放置在离子卡上。谁能指导我？谢谢！

屏幕截图

这是生成的html代码：

<ion-card class="card card-md">

  <ion-card-content class="card-content card-content-md">
    <ion-grid class="grid">

        <ion-row class="row">orci ut</ion-row>

        <ion-row class="row">lorem ipsum dolor</ion-row>

        <ion-row class="row">consectetur adipiscing </ion-row>

        <ion-row class="row">tristique</ion-row>

        <ion-row class="row">
      <ion-col class="col" col-4="">netus</ion-col>
      <ion-col class="col" col-4="">dui sollicitudin lacinia </ion-col>
      <ion-col class="col" col-4="">accumsan</ion-col>
    </ion-row>
    <ion-row class="row">
      <ion-col class="col" col-4="">Phasellus porta</ion-col>
      <ion-col class="col" col-4="">bibendum</ion-col>
      <ion-col class="col" col-4="">tempor eget</ion-col>
    </ion-row>

    </ion-grid>
  </ion-card-content>
</ion-card>

Answer 1

我希望我做对了：首先，如果您的列应适合其内容，则只需省略col-4。参见docs：

默认情况下，所有设备和屏幕尺寸的列在行内的宽度相等。

要使列水平居中，可以使用text-align CSS属性。请参见developer.mozilla.org上的说明：

text-align CSS属性指定嵌入式或表格单元格框的水平对齐方式，这意味着它像垂直对齐方式一样工作，但在水平方向上

结果可能看起来像这样（我使用的是内联样式，如果可能的话，您可能希望将这些样式添加到CSS中）

<ion-card class="card card-md">
    <ion-card-content class="card-content card-content-md">
        <ion-grid class="grid">

            <ion-row class="row">orci ut</ion-row>
            <ion-row class="row">lorem ipsum dolor</ion-row>
            <ion-row class="row">consectetur adipiscing </ion-row>
            <ion-row class="row">tristique</ion-row>

            <ion-row class="row" style="text-align: center">
                <ion-col class="col">netus</ion-col>
                <ion-col class="col">dui sollicitudin lacinia </ion-col>
                <ion-col class="col">accumsan</ion-col>
            </ion-row>
            <ion-row class="row" style="text-align: center">
                <ion-col class="col">Phasellus porta</ion-col>
                <ion-col class="col">bibendum</ion-col>
                <ion-col class="col">tempor eget</ion-col>
            </ion-row>

        </ion-grid>
    </ion-card-content>
</ion-card>

离子：适合离子网格

1 个答案: