在 mat-card-title 中左右对齐

Question

在 Angular 5 中使用以下代码：

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

我明白了：

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

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

原文由 techkuz 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 清晰易读。

原文由 Vanessa 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用弹性盒子：

 .container {
  display: flex;
}

.fill {
  flex: 1;
}

 <div class="container">
  <div>Card</div>
  <div class="fill"></div>
  <div>Title</div>
</div>

原文由 Tomasz Kula 发布，翻译遵循 CC BY-SA 3.0 许可协议