Html 如何在跨度中对齐角度标记内容

我需要正确地对齐两个信息，即PO编号和供应商，如何做到这一点

from

PO Number: 344 Vendor: yu
PO Number: 3445 Vendor: yu
PO Number: 344 Vendor: yu

to

PO Number: 344   Vendor: yu
PO Number: 3445  Vendor: yu
PO Number: 344   Vendor: yu

采购订单编号：{{n.PO_编号}供应商：{{n.vendorname}}看起来您试图以一种非常困难的方式创建一个表，为什么不尝试以下方法：

HTML

<table>
  <tr ng-repeat="n in listof_POs">
  <td>PO Number: {{ n.po_number}}</td>
  <td>Vendor {{ n.vendorname}}</td>
 </tr>
</table>


采购订单编号：{n.PO_编号}
供应商{n.vendorname}
如果您可以使用Angular Flex布局，您可以这样处理它

<div *ngFor="let n of listof_POs" style="color: white;" fxLayout="row">
      <b fxFlex="50%">PO Number: {{n.po_number}}</b>
      <b fxFlex="50%">Vendor: {{n.vendorname}}</b>
</div>


You can also use CSS Flexbox to achieve this


采购订单编号：{n.PO_编号}
供应商：{n.vendorname}
您也可以使用CSS Flexbox来实现这一点

<div *ngFor="let n of listof_POs" style="color: white;" fxLayout="row">
      <b fxFlex="50%">PO Number: {{n.po_number}}</b>
      <b fxFlex="50%">Vendor: {{n.vendorname}}</b>
</div>


You can also use CSS Flexbox to achieve this