css - ionic 卡对齐上的 Ionic 3 ionic 网格

Question

如何对齐和修剪我的网格？列不对，不是一个在另一个下面，选择分区。

<ion-card>
    <ion-card-header>
        <p style="margin-left: 5%"> last orders buy </p>
    </ion-card-header>
    <ion-card-content padding-right >
        <ion-grid style="width: ; "> 
            <ion-row>
                <ion-col col-1 style="font-size: 10px">
                    ID 
                </ion-col>
                <ion-col col-3 style="font-size: 10px">
                    Operação
                </ion-col>
                <ion-col col-1 style="font-size: 9px; margin-top: 1px">
                    De
                </ion-col>
                <ion-col col-1 style="font-size: 10px ">
                    P/
                </ion-col>
                <ion-col col-2 style="font-size: 10px">
                    Volume
                </ion-col>
                <ion-col col-2 style="font-size: 10px">
                    Valor
                </ion-col>
                <ion-col col-2 style="font-size: 10px">
                    Status
                </ion-col>
            </ion-row>
            <ion-row style="margin-left: -20px" *ngFor="let dado of dados" >
                <ion-list>
                    <ion-item-sliding #item>
                    <ion-item>
                    <ion-col col-1  style="font-size:10px">
                        #{{dado.id}}
                    </ion-col>
                    <ion-col col-3 style="font-size:10px">
                        {{dado.operation}}
                    </ion-col>
                    <ion-col col-1 style="font-size:10px">
                        {{dado.from_currency}}
                    </ion-col>
                    <ion-col col-1 style="font-size:10px">
                        {{dado.to_currency}}
                    </ion-col>
                    <ion-col col-2 style="font-size:10px">
                        {{dado.value_in_currency}}
                    </ion-col>
                    <ion-col col-2 style="font-size:10px">
                        {{dado.value_brl}}
                    </ion-col>
                    <ion-col col-2 style="font-size:10px">
                        {{dado.operation}}
                    </ion-col>
              </ion-item> 
          <ion-item-options side="right">
              <button ion-button color="danger" (click)="share(item)">Cancelar</button>
          </ion-item-options>
      </ion-item-sliding>
                </ion-list>
            </ion-row>
        </ion-grid>
    </ion-card-content>
</ion-card>

Answer 1

如果你删除这个滑动看起来很好

.html 的变化

<ion-content no-padding>

  <ion-card no-padding>
    <ion-card-header>
       <p style="margin-left:-9px;"> last orders buy  </p>
    </ion-card-header>

    <ion-card-content no-padding>
      <ion-grid> 
        <ion-row>
          <ion-col col col-1 style="font-size: 10px">
            ID 
          </ion-col>
          <ion-col col col-2 style="font-size: 10px">
                Operação
          </ion-col>
          <ion-col style="font-size: 9px;">
              De
          </ion-col>
          <ion-col style="font-size: 10px ">
              P/
          </ion-col>
          <ion-col col col-2 style="font-size: 10px">
              Volume
          </ion-col>
          <ion-col col col-2 style="font-size: 10px">
              Valor
          </ion-col>

          <ion-col style="font-size: 10px">
              Status
          </ion-col>
        </ion-row>


        </ion-grid>

        <ion-grid>

              <ion-row *ngFor="let dado of dados">

             <ion-col col col-1  style="font-size:10px;">
            #{{dado.id}}
            </ion-col>
           <ion-col col col-2 style="font-size:10px">
    {{dado.operation}}
            </ion-col>
             <ion-col style="font-size:10px">
    {{dado.from_currency}}
            </ion-col>
             <ion-col style="font-size:10px">
    {{dado.to_currency}}
            </ion-col>
             <ion-col col-2 style="font-size:10px">
    {{dado.value_in_currency}}
            </ion-col>
             <ion-col col-2 style="font-size:10px">
    {{dado.value_brl}}
            </ion-col>
             <ion-col style="font-size:10px">
    {{dado.operation}}
            </ion-col>
        </ion-row>

      </ion-grid>

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

结果