如何左对齐 Angular Material 拉伸 md 按钮中的文本？

Posted 2023-03-05

【中文标题】如何左对齐 Angular Material 拉伸 md 按钮中的文本？

【英文标题】：How can I left align the text in an Angular Material stretched md-button?

【发布时间】：2015-08-07 18:49:27

【问题描述】：

无需过多地修改我自己的 CSS，是否有一个属性或配置我可以用来左对齐 md-button 中的文本，例如拉伸一点以适应菜单？

这是我目前的看法

<md-sidenav md-is-locked-open="$mdMedia('gt-md')" layout="column">
  <md-toolbar>
    <h1 class="md-toolbar-tools">
      <a ng-href="/" layout="row" href="/">
        <div class="docs-logotype">Material Design</div>
      </a>
    </h1>
  </md-toolbar>
  <md-content flex role="navigation" layout="column">
    <md-button>Button1</md-button>
    <md-button>Button2</md-button>
  </md-content>
</md-sidenav>

<md-content flex layout="column">
  <md-toolbar>
    <div class="md-toolbar-tools">
      <button class="md-icon-button md-button" aria-label="Settings">
        <md-icon md-svg-icon="images/icons/menu.svg" aria-hidden="true"></md-icon>
        <div class="md-ripple-container"></div>
      </button>
      <md-button>Button1</md-button> <!-- how to left align this text inside a stretched button -->
      <md-button>Button2</md-button>
      <span flex=""></span>
      <md-button>Right side button</md-button>
      <button class="md-icon-button md-button" aria-label="More">
        <md-icon md-svg-icon="images/icons/more_vert.svg" aria-hidden="true"></md-icon>
        <div class="md-ripple-container"></div>
      </button>
    </div>
  </md-toolbar>
  <md-content flex>
    Some content !!
  </md-content>
</md-content>

【参考方案1】：

使用带有flex 属性的空<span> 标记，如下所示。您甚至可以为flex 属性指定一个值来获取更具体的位置。

<div layout="row" layout-align="start center" flex>
    <md-button>button 1 </md-button>
    <span flex></span>
</div>

如果您只想对齐按钮内的文本，请尝试像这样设置style 属性：

<md-button style="text-align:left">button </md-button>

【讨论】：

对于带有 Material 的 Angular 10，您可以通过这种方式使用 de Declarative API 进行 flex-layout：button 1 更多信息：github.com/angular/flex-layout/wiki/Declarative-API-Overview

【参考方案2】：

如果在 md-toolbar(Angular 4) Angular 6+ 中使用，您可以这样做：

html

<mat-toolbar id="toolbar" color="primary" >
  <mat-button>button 1 </mat-button>
  <span class="spacing"></span>
  <mat-button>button 2 </mat-button>
</mat-toolbar>

或

<mat-toolbar id="toolbar" color="primary">
  <mat-button>button 1 </mat-button>
  <span style="flex: 1 1 auto;"></span>
  <mat-button>button 2 </mat-button>
</mat-toolbar>

如果 HTML 中没有样式，您的 CSS：

.spacing 
    flex: 1 1 auto;

希望这对某人有所帮助。

【参考方案3】：

在 VueJS 中（nuxt-vue-material）

.md-button .md-ripple 
  justify-content: unset;