css - Mat-Toolbar 对齐项目(左,中,右)
问题描述
我开发了一个工具栏,但我无法将元素对齐在同一行,左、中和右。
有谁知道我如何对齐这些元素?
我注意到名称为左对齐的元素与左对齐,对齐中心与中心对齐,右对齐与右对齐。
谢谢
代码
<mat-sidenav-content fxFlexFill>
<mat-toolbar color="primary">
<mat-toolbar-row>
<button mat-icon-button (click)="sidenav.toggle()" fxShow="true" fxHide.gt-sm>
<mat-icon>menu</mat-icon>
</button>
<div fxShow="true" fxHide.lt-md>
<a href="#" mat-button>Align left</a>
<a href="#" mat-button>Align left</a>
<a href="#" mat-button>Align center</a>
<a href="#" mat-button>Align center</a>
<a href="#" mat-button>Align right</a>
<a href="#" mat-button>Align right</a>
</div>
</mat-toolbar-row>
</mat-toolbar>
解决方案
css。这将扩展以占用最大可用空间。
.flexExpand {
flex: 1 1 auto;
}
在您的模板中使用 flexExpand 实用程序来分隔项目
<mat-toolbar>
<mat-toolbar-row>
<div >
<a mat-button [routerLink]="'/accounts'"> Accounts </a>
<a mat-button [routerLink]="'/create-account'"> Create Account </a>
</div>
<span class="flexExpand"></span>
<div >
<a mat-button [routerLink]="'/logout'"> Logout </a>
</div>
<mat-toolbar-row>
</mat-toolbar>
推荐阅读
- android - Flutter - 从列表中选择一个联系人会选择所有联系人
- javascript - jquery 3.0.0 升级破坏了 html 表格功能
- javascript - 由于异步编程经验不足,在 api 调用期间无法获得所需的输出
- javascript - 刷新页面时是否会在 JS 中重新加载 cookie?
- reactjs - 如何在 Next/React/material-ui 项目中切换 body 上的类
- java - 如何在Java中以十六进制格式化字符串?
- php - 格式化 CLI 程序的输出
- c++ - 在 TYPED_TEST 中获取 TypeParam()
- python - https 获取请求第一次尝试失败 - python 请求
- sql - 如何在不加入的列表中添加选择