css - 为什么我的 Ionic 应用程序中的按钮会超出屏幕范围？

Question

我在 Ionic 中创建了一个简单的聊天表单。

问题:按钮超出屏幕范围。

看起来像这样 -

我的 chat.html

<ion-header>

  <ion-navbar>
    <ion-title>communicationgiven</ion-title>
    <button ion-button (click)="close()" style="margin-left: 90%;margin-top: -3%">Close</button>
  </ion-navbar>

</ion-header>


<ion-content padding>

  <ion-list>
  <div>

  <p *ngFor="let list of list; let i = index;">
    <ion-item>
        <!-- <p style="color: #1bb0f4;font-size: 20px;">Tagto {{list.TAG_TO}}</p> -->
        <p style="color: #1bb0f4;"> {{list.TAG_FROM}}</p>
        <p style="color: #d2dce1;"> {{list.TAG}}</p>
    </ion-item>
  </p>
  </div>
    </ion-list>
</ion-content>


<ion-footer class="footer">
  <form #com="ngForm" (submit)="onsubmit(com.value)">
    <ion-input placeholder="TAG" type="text" name="TAG" ngModel ></ion-input>
    <button ion-button type="submit" style="margin-left: 90%;margin-top: -5%;">Submit</button>
  </form>

</ion-footer>

我想知道为什么我的按钮会超出页面；无论屏幕尺寸如何，我如何确保它们留在屏幕内？

此处的最佳做法是什么？我是 CSS 的新手。

Answer 1

你必须为左键使用下面的代码

<ion-header>

    <ion-navbar>
        <button ion-button icon-only menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>

        <ion-title>
            Page Title
        </ion-title>

        <ion-buttons end>
            <button ion-button icon-only (click)="openModal()">
                <ion-icon name="options"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>

</ion-header>

对于页脚，你可以使用 ion-grid

<ion-footer class="footer">
  <form #com="ngForm" (submit)="onsubmit(com.value)">
    <ion-grid>
        <ion-row>
            <ion-col col-9>
                <ion-input placeholder="TAG" type="text" name="TAG" ngModel ></ion-input>
            </ion-col>
            <ion-col col-3>
                <button ion-button type="submit">Submit</button>
            </ion-col>
        </ion-row>
    </ion-grid>
  </form>
</ion-footer>

更多信息请引用这里

https://ionicframework.com/docs/api/components/toolbar/Navbar/