三跨度内垫选项

Question

我需要显示如下垫子选项

我添加了三个 span 来覆盖它们，但它们似乎已附加 together.Here 是结果图像。

请帮忙。

<mat-option *ngFor="let acc of fromAccounts.deposit" [value]="acc" >
                <span style="display: inline-block">{{acc.accountProductDesc}}</span>
                <span style="display: inline-block">{{acc.maskedAccountNumber}}</span>
                <span style="display: inline-block">{{acc.balance}}</span>
              </mat-option>

Answer 1

如果您只想更改 <mat-option> 内容的显示，那么摆弄 scss 应该就是您所需要的。

当然CSS解决方案几乎是无穷无尽的，有很多方法可以实现你想要的，你只需要选择你的想法：

可扩展（如果需要）
正确实现你想要的
容易understand/read/debug

这是我建议的一个简单方法：

模板：

<mat-option *ngFor="let acc of fromAccounts.deposit" [value]="acc" >
  <div class="account-details">
    <span class="description">{{acc?.accountProductDesc}}</span>
    <span class="number">{{acc?.maskedAccountNumber}}</span>
    <span class="balance">{{acc?.balance | currency}}</span>
  </div>
</mat-option>

SCSS:

.account-details{
  display: flex;
  *{
    padding: 0 3px;
  }
}
.description{
  font-weight: bold;
}
.number{
  font-size: small
}
.balance{
  margin-left: auto;
}

三跨度内垫选项

Three span inside mat-option

sass

angular-material2

angular

模板：

SCSS: