我提到了我的 button按照上面的链接对齐左右 start
和 end
键。但是我无法按照链接中的 View 设置我的按钮,这里是我的输出图像
这是我的代码
<ion-header class="home">
<ion-navbar primary padding>
<ion-row>
<ion-buttons start>
<button menuToggle >
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-title>Auto Parts</ion-title>
<ion-buttons end>
<button> <ion-icon name="document"></ion-icon></button>
<button><ion-icon name="heart"></ion-icon></button>
<button><ion-icon name="cart"></ion-icon></button>
</ion-buttons>
</ion-row>
<ion-row>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
</ion-row>
</ion-navbar>
</ion-header>
到目前为止我尝试过的是:
float: right; and float: left;
algin: right
但无法让我的按钮向左
最佳答案
您可以使用 <ion-toolbar>
实现该布局像在 this plunker 中看到的那样放置搜索栏
<ion-header class="home">
<ion-navbar primary padding>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Auto Parts</ion-title>
<ion-buttons end>
<button> <ion-icon name="document"></ion-icon></button>
<button><ion-icon name="heart"></ion-icon></button>
<button><ion-icon name="cart"></ion-icon></button>
</ion-buttons>
</ion-navbar>
<ion-toolbar primary>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
</ion-toolbar>
</ion-header>
编辑:
To hide both borders, the
no-border
attribute should be used on the ion-toolbar. To hide the top or bottom border, theno-border-top
andno-border-bottom
attribute should be used.
关于html - 无法在标题左侧对齐我的菜单按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38962774/