為什么我的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-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/

Answer 2

您已給定style =“ margin-left：90％，即左邊距為90％，因此很明顯它將超出屏幕，請嘗試減小該值。

Answer 3

很難回答這個問題，因為我無法使用您提供的內容在本地復制該問題。

我將從減少margin-left: 90%按鈕元素的margin-left: 90%開始，看看如何進行。

關於最佳做法，重要的是不要使用內聯樣式。 那就是把樣式放在style html屬性中。 而是嘗試使用外部樣式表或至少使用內部樣式表，請參閱： https : //www.w3schools.com/css/css_howto.asp