水平对齐页眉中的元素答案

【问题标题】：Align horizontally element in the header page水平对齐页眉中的元素
【发布时间】：2023-04-05 21:04:02
【问题描述】：

我使用角度材料和 css 样式来对齐我的页眉元素。我想将三个图标（设置、help_outline 和 person_outline）对齐。

<mat-toolbar color="primary">
    <mat-toolbar-row>
        <button mat-icon-button (click)="toggleSideBar()">
            <mat-icon>menu</mat-icon>
        </button>

        <span> APP LOGO </span>

        <div fxFlex fxLayout="row" fxLayoutAlign="flex-end">
            <ul fxLayout="row" fxLayoutGap="20px" style="display: flex; align-items: flex-end;">
                <li>
                    <button mat-icon-button>
                        <mat-icon>settings</mat-icon>
                    </button>
                </li>
                <li>
                    <button mat-icon-button>
                        <mat-icon>help_outline</mat-icon>
                    </button>
                </li>
                <li>
                    <button mat-button [matMenuTriggerFor]="menu">
                        <mat-icon>person_outline</mat-icon>
                    </button>
                    <mat-menu #menu="matMenu">
                        <button mat-menu-item>
                            <mat-icon>exit_to_app</mat-icon>
                            Sign out
                        </button>
                    </mat-menu>

                </li>
            </ul>
        </div>
    </mat-toolbar-row>
</mat-toolbar>

有什么想法吗？

【问题讨论】：

你试过float:right把它们拉到右边吗？将其添加到图标的父 div 以一次将它们全部拉出。
你好@oguzhancerit，我放了 float:right 但没有任何改变。你能用简单的代码示例来展示你的想法吗
如果你分享工作样本，我可以提供更多帮助
请出示minimal reproducible example，以便我们为您提供帮助。
您好@oguzhancerit，请查看可以看到我作品的链接stackblitz.com/github/lnquaidorsay/bibliofront

标签： html css flexbox angular-material

【解决方案1】：

mat-toolbar-row{
  height: 50px;
  background-color: blue;
  
  display:flex;
  justify-content:space-between;
}

div {
  display: inline-flex;
  justify-content: flex-end;
}

ul {
  list-style: none;
}

ul li {
  display: inline-block;
}

<mat-toolbar>
  <mat-toolbar-row>
  
    <div id="menu">
      <button>
            <mat-icon>menu</mat-icon>
    </button>
      <span> APP LOGO </span>
    </div>
  
    <div id="icons">
      <ul>
        <li>
          <button mat-icon-button>
            <mat-icon>settings</mat-icon>
          </button>
        </li>
        <li>
          <button mat-icon-button>
            <mat-icon>help_outline</mat-icon>
          </button>
        </li>
        <li>
          <button>
            <mat-icon>person_outline</mat-icon>
          </button>
        </li>
      </ul>
    </div>
    
  </mat-toolbar-row>
</mat-toolbar>

我相信还有很多其他方法可以做到这一点。

【讨论】：

【解决方案2】：

要对齐图标，您有简单的选择

将工具栏的内容分成明确的组（左、中右），并将mat-toolbar 的justify-content 属性定义为space-between。它会将所述组与组之间的自动间距对齐。
使用文档中指定的垫片。只需在您的徽标和图标组之间创建一个空的span，并将所述范围的flex 属性定义为1 1 auto。它将跨越元素以占用任何可用空间，将您的图标推到右侧。
更简单的是，在你的图标组上使用margin-left: auto 就可以了。

查看文档中的示例，如有疑问请检查代码并查看他们使用的 span 技巧：https://material.angular.io/components/toolbar/examples

【讨论】：