Question

我有这个：

<div style="background-color: #25a0da; color: White; margin: 0">
  <h1 style="margin: 0  20px; padding: 0; line-height: 52px;">
    <span style="display: flex; justify-content: flex-start"><asp:Literal ID="litDateRange4" runat="server"></asp:Literal></span>
    <span style="display: flex; justify-content: flex-end"> <asp:Literal ID="litPendingProfit" runat="server"></asp:Literal></span>
  </h1>
</div>

我希望将第一个跨度捕捉到左边，将第二个跨度捕捉到右边，这是可行的，但是它们出现在不同的行上。

flex的新手。

Answer 1

我希望将第一个跨度捕捉到左侧，将第二个跨度捕捉到正确的

您可以使用flexbox布局模型来实现。

h1 {
  display: flex;
  justify-content: space-between;
}

<div style="background-color: #25a0da; color: White; margin: 0">
  <h1 style="margin: 0  20px; padding: 0; line-height: 52px;">
    <span style="display: flex; justify-content: flex-start">aaa</span>
    <span style="display: flex; justify-content: flex-end"> bbb</span>
  </h1>
</div>

Answer 2

您可以添加

justify-content: space-between

到父元素。这样，子级flexbox项将在相对侧对齐，并在它们之间留有空间。

CSS左右对齐文本

2 个答案: