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%，看看情况如何。

关于最佳实践，重要的一点是不使用内联样式。这是将样式放在style html属性中。而是尝试使用外部样式表或至少内部样式表，请参阅：https://www.w3schools.com/css/css_howto.asp

为什么我的按钮会在我的Ionic应用程序中脱离屏幕？

3 个答案: