如何将搜索、登录和注册按钮放置在菜单右侧的标题中？

Question

这就是菜单，但我希望圆圈中的三个按钮位于右侧...我该怎么做？ 我正在使用 Angular 材料。

Answer 1

如果您使用 Angular Material 工具栏，请遵循 官方文档

来自文档：

工具栏不对其内容执行任何定位。这使用户完全有权根据其应用程序定位内容。

<mat-toolbar-row>
  <span>Second Line</span>
  <span class="example-spacer"></span>
  <mat-icon class="example-icon" aria-hidden="false" aria-label="Example user verified icon">verified_user</mat-icon>
</mat-toolbar-row>

一种常见的模式是将标题与一些操作放在左侧 在右侧。这可以通过 display: flex:

轻松实现

.example-spacer {
  flex: 1 1 auto;
}

按照文档操作，您将在右侧看到三个按钮

Answer 2

我从未使用过 Angular Material，但我认为你可以使用这个：

<div class="parent">
  <div class="child" style="display : flex , justify-content :"space-between">
   <any Element(Tag)></any Element(Tag)>
   <any Element(Tag)></any Element(Tag)>
  </div>
</div>

Answer 3

有一个垫片，充当右侧零件位置的占位符。

<span class="example-spacer"></span>

您可以在角度材质的官方网站中找到类似的实现。 https://v6.material.angular.io/components/toolbar/examples