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

2024-05-09

无需过多修改我自己的 CSS,是否有一个属性或配置可以用来左对齐文本md按钮 https://material.angularjs.org/latest/#/api/material.components.button/directive/mdButton例如,它被拉伸了一点以适应菜单?

这是我目前的看法

<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>

使用空<span>带有一个标签flex属性,如下图。您甚至可以指定一个值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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何左对齐 Angular Material 拉伸 md 按钮中的文本? 的相关文章

随机推荐