如何将 PrimeNG 中的 p-checkbox 标签放在复选框的左侧

Question

 <p-checkbox name="group1" [value]="true" label="Outsourcing"
                             style="margin: 0 25px"></p-checkbox>

默认情况下，标签在复选框的右侧，如何将其更改为左侧？

Answer 1

您可以通过在 p-checkbox 元素中将 flex-direction 样式 属性 设置为 row-reverse 来实现。

<p-checkbox 
  name="group1" 
  [value]="true" 
  label="Outsourcing" 
  style="margin: 0 25px; flex-direction: row-reverse">
</p-checkbox>

工作示例：https://stackblitz.com/edit/angular-ivy-drzmxl?file=src/app/app.component.html