html - 在 mat-card-title 中左右对齐

Question

在 Angular 5 中使用以下代码:

  <mat-card>
      <mat-card-title> Test message </mat-card-title>
  </mat-card>

我明白了:

我怎样才能得到这个(一些文本是左对齐的，一些文本是右对齐的)？

我尝试创建 div 并使用预定义的 css 放入段落，但没有成功。

Answer 1

您还可以使用更少的行来完成它，并通过使用容器和 flex 属性更好地调整它以适应内容:

<mat-card class="card-container">
  <mat-card-title > Test message </mat-card-title>
  <mat-card-title> Test message </mat-card-title>
</mat-card>

和这个 CSS:

.card-container {
  /*  not needed styles to reflect it */ 
  background: blue;
  padding: 10px;
  color: white;
  width: 500px;

  /* needed styles below */
  display: flex;
  justify-content: space-between;
}

您可以在此处查看工作示例:https://jsfiddle.net/VanessaRC/Lz9vz6bs/1/

这将确保，如果您根据需要调整容器的宽度，样式会很好地调整以适应而不会中断，并使您的 HTML 清晰易读。