css - 如何在 MS Fluent UI 中对齐 Card.Section 组件？

Question

我有带有 2 个 Card.Sections 的卡片。我正在尝试将第二个对齐到最右边，但是对我来说没有任何效果。我试过:

将部分设置为 flex并分配 marginLeft: auto对于第二个

设置卡position: relative ，然后添加 float: right到第二个

Answer 1

我今天遇到了同样的问题，这是我解决的方法:

<Card horizontal tokens={cardTokens}>
  <Card.Section>
    <Checkbox
      label="todo status"
    />
  </Card.Section>
  <Card.Item grow={1}>
    <span />
  </Card.Item>
  <Card.Section styles={footerCardSectionStyles}>
    <Icon iconName="Delete" />
  </Card.Section>
</Card>

正如你所看到的，我用过

 <Card.Item grow={1}>
   <span />
 </Card.Item>

两者之间 Card.Section s 这是插入一个具有剩余宽度的元素，从而插入第二个 Card.Section到最后。