Angular Material中如何将锚点标签内元素改为单行显示？

你遇到的换行问题根源在于mat-icon和span都设置了display: block——块级元素会独占整行，自然就会上下排列了。我们可以通过Flex布局快速解决这个问题，同时保持你需要的居中效果：

推荐方案（使用CSS类，更易维护） #

第一步：添加CSS样式 #

在你的组件样式文件（比如xxx.component.css）中添加以下类：

.dashboard-nav-link {
  /* 使用Flex布局让内部元素水平排列 */
  display: flex;
  /* 垂直方向居中对齐图标和文字 */
  align-items: center;
  /* 整体内容水平居中 */
  justify-content: center;
  /* 控制图标与文字的间距，可根据需求调整数值 */
  gap: 8px;
}

.dashboard-nav-link mat-icon {
  /* 保留你原来设置的图标高度 */
  height: 15px;
}

第二步：修改HTML代码 #

移除内联的display: block样式，给锚点标签加上我们定义的CSS类：

<a mat-list-item [routerLink]="['dashboard']" class="dashboard-nav-link">
  <mat-icon>dashboard</mat-icon>
  <span>Dashboard</span>
</a>

快速测试方案（内联样式，不推荐长期使用） #

如果只是想快速验证效果，也可以直接用内联样式修改（但不利于后续维护）：

<a mat-list-item [routerLink]="['dashboard']" style="display: flex; align-items: center; justify-content: center; gap: 8px;">
  <mat-icon style="height:15px;">dashboard</mat-icon>
  <span>Dashboard</span>
</a>

关键说明 #

• Flex布局是解决这类元素排列问题的最优方案，它能轻松实现水平排列+居中对齐的需求。
• 必须移除mat-icon和span上的display: block，否则Flex布局的效果会被覆盖。
• gap属性用来控制图标和文字的间距，相比margin更直观，也不会出现外边距折叠的问题。

内容的提问来源于stack exchange，提问作者Vishwas