在mat-card-title中左右对齐

Question

使用以下代码Angular 5:

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

我明白了:

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

我尝试div使用预定义创建并放入内部段落,css但它没有成功.

Answer 1

使用flexbox:

.container {
  display: flex;
}

.fill {
  flex: 1;
}

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

Answer 2

您也可以使用更少的行来完成它,并使用容器和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清晰易读.