离子内容未正确对齐

Question

我有 3 个按钮（注意：我已经尝试过使用其他元素，例如 3 个 texts/labels/etc。）

第一个按钮应该在开始（屏幕最左边），

第二个按钮应该在屏幕中间

第三个按钮应该在最后（屏幕最右侧）

我尝试使用 class=“ion-justify-content-between”，但问题仍然存在。

这是屏幕截图：

这是我的代码：

<ion-card>
  <ion-card-content>
    <ion-item>
      <ion-grid>
        <ion-row class="ion-justify-content-between">
          <ion-col >
            <div>
              <ion-button>ok</ion-button>
            </div>
          </ion-col>
          <ion-col >
            <div>
              <ion-button>ok</ion-button>
            </div>
          </ion-col>
          <ion-col>
            <div>
              <ion-button>ok</ion-button>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>
  </ion-card-content>
</ion-card>

[注：不带ion-card/ion-card-content/ion-item也可以试试。我的意思是你可以保留离子网格，问题是一样的]

谁能告诉我哪里出了问题？

Answer 1

最简单的方法是使用 flex。

#container{
display:flex;
justify-content:space-between;
}

<div id='container'>
              <ion-button>ok</ion-button>
           
              <ion-button>ok</ion-button>
            
              <ion-button>ok</ion-button>
</div>

Answer 2

https://forum.ionicframework.com/t/ionic-contents-are-not-aligning-properly/192655

来自 ionic 论坛的

Rapropos 回答了我这个问题。 Link 以上。如果你去那里，请不要忘记查看我的评论回复，我在他的回答后在那里做了进一步的修复。多亏了他。

这里是 .html

<ion-header>
  <ion-toolbar color="primary" class="ion-text-center">
    <ion-title>Login</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col size-md="6" offset-md="3">
        <ion-card>
          <ion-card-header>
            <ion-card-title>

            </ion-card-title>
          </ion-card-header>
          <ion-card-content>

            <ion-item>
              <ion-input type="text" placeholder="User Name / Email" [(ngModel)]="id"></ion-input>
            </ion-item>
            <ion-item>
              <ion-input type="password" placeholder="Password" [(ngModel)]="password"></ion-input>
            </ion-item>
            <ion-item>
              <ion-checkbox color="secondary" checked slot="start"></ion-checkbox>
              <ion-label class="ion-margin-left">Remember me</ion-label>
            </ion-item>
            
              <div class="outerbox ion-margin-vertical">
                <ion-button color="tertiary" size="small" (click)="forwardToNextPage1()">Sign Up</ion-button>
                <ion-button color="primary" size="small" (click)="GetALogin()">Login</ion-button>
                <ion-button color="secondary" size="small" (click)="forwardToNextPage2()">Forgot Password?</ion-button>
              </div>

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

这里是.css

.outerbox {
  display: flex;
  justify-content: space-between;
}

一个非常重要的注意事项：

不要把 div 放在 ion-item 里面。如果你这样做，所有按钮都会像这样向左移动

单独使用div。不要让任何其他事情影响它。

Answer 3

只需在 ion-col 中添加离子实用程序类它按预期工作。

<ion-grid>
    <ion-row class="ion-justify-content-between">
      <ion-col class="ion-text-start">
        <div>
          <ion-button>ok</ion-button>
        </div>
      </ion-col>
      <ion-col class="ion-text-center">
        <div>
          <ion-button>ok</ion-button>
        </div>
      </ion-col>
      <ion-col class="ion-text-end">
        <div>
          <ion-button>ok</ion-button>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>

离子内容未正确对齐

Ionic contents are not aligning properly

html

css

ionic-framework

ionic2