Question

按钮名称未按相同的起始顺序对齐。例如：第一个按钮名称（Optimus XL Stents）略高于第二个按钮名称（AltoSa XL PTA Balloons）我怎样才能将它们放在同一个起点上？请查看下面的图片。

产品页面

以下是代码：

products.html放在

<ion-content>
  <div class ="custom-padding">
    <div *ngFor = 'let product of productList'>
      <button ion-button color="buttoncolor" round (click)="onProductClick(product.id)" style="text-transform: none;" margin-bottom="10px" margin-left="10px" class="btn block">
        {{product.name}}
        <ion-icon ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" class="icn"></ion-icon>
      </button>
    </div>

products.ts

export class ProductsPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  pageTitle: string = 'Products';

  productList: any[] = [
    {
      "id" : "Optimus",
      "name": "Optimus XL Stents"
    },
    {
      "id" : "AltoSa",
      "name": "AltoSa XL PTA Balloons"
    },
    {
      "id" : "Pillar",
      "name": "Pillar Bifurcation Stents"
    },
    {
      "id" : "Exeter",
      "name": "Exeter Retrieval Devices"
    },
    {
      "id" : "Pillow",
      "name": "Pillow Occluder"
    },
    {
      "id" : "Lokum",
      "name": "Lokum Guide Wires"
    }
  ];

products.scss

    page-products {
      .btn {
      position: relative;
      width: 90%;
      padding-right: 40%;
      }

      .btn ion-icon {
      position: absolute;
      left: 90%
      }

     .custom-padding {
     margin-top: 100px !important;
     }
   }

Answer 1

来自

style="text-transform: none;" margin-bottom="10px" margin-left="10px"

到

style="text-transform: none; margin-bottom:10px; margin-left:10px"

Answer 2

用这个替换你的HTML

<div class ="custom-padding">
    <div *ngFor = 'let product of productList'>
      <button ion-button full color="buttoncolor" round (click)="onProductClick(product.id)"  class="btn">
        <span>{{product.name}}</span>
        <ion-icon ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" class="icn"></ion-icon>
      </button>
    </div>
</div>

并通过此

更改您的CSS

.custom-padding{
      button{
        text-transform: none;
        margin-left:10px;
        margin-bottom:10px;
        span{
          display: flex;
          flex-shrink: 0;
          align-items: center;
          justify-content: start;
          width: 100%;
          flex-flow: row nowrap;
        }
      }

      .btn ion-icon {
        position: absolute;
        right: 7%
      }

     .custom-padding {
      margin-top: 100px;
     }
}

demo link

如何以相同的起始顺序对齐按钮名称？

2 个答案: