Question

我正在使用离子v2。我在android的导航栏中有问题。请看这个图像： https://drive.google.com/file/d/0B7NIjYwi6WIpM0I3eXJLdWlnV0k/view?usp=sharing

左右标题和按钮未垂直对齐。左边的一个在顶部，标题在底部，左边的按钮在中间。

在iOS和网络浏览器中，所有内容都完美对齐。这是图像：

https://drive.google.com/file/d/0B7NIjYwi6WIpcERhd1dPa3FVaDA/view?usp=sharing

这是我在离子v2中的html：

<ion-header>
    <ion-navbar color="nav_bar" class="nav_bar_style">

    <ion-buttons start>
        <button ion-button clear color="nav_bar_bttn (click)="searchBttnPressed()">
        <ion-icon ios="ios-search" md="md-search"></ion-icon>
        </button>
    </ion-buttons>

    <ion-title text-center>Main</ion-title>

    <ion-buttons end>
        <button ion-button clear color="nav_bar_bttn" (click)="sortBttnPressed()">
            <ion-icon>Sort</ion-icon>
        </button>
        <button ion-button clear color="nav_bar_bttn" (click)="addBttnPressed()">
            <ion-icon name="md-add"></ion-icon>
        </button>
    </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content>
    <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
        {{item.noteId}}
            <div class="item-note" item-right>
                {{item.content}}
            </div>
    </button>
    </ion-list>
    <div *ngIf="selectedItem" padding>
        You navigated here from <b>{{selectedItem.title}}</b>
    </div>
</ion-content>

Answer 1

我发现了解决这个问题的一种非常黑客的方法，但是嘿，它有效。

将它放在.scss文件中：

.toolbar-title-md {
    text-align: left;
    margin-right: 50px;
    margin-bottom: -30px;
}

Toolbar-title-md是确切的文本项。当边距被放置在它上面时，它似乎按照你的预期正常排列。当以另一种方式翻转时，它具有与按下导航项目（而不是模态）完全相同的定位。

我建议找一种方法来减少正确数量的文本，这样就可以避免标题的开头被切断而不是结束。

离子2 Android标题和按钮未在导航栏中对齐

1 个答案: