CSS左右对齐文本[重复]答案

【问题标题】：CSS align text left and right [duplicate]CSS左右对齐文本[重复]
【发布时间】：2020-01-03 18:20:22
【问题描述】：

我有这个：

<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 很陌生。

【问题讨论】：

标签： css flexbox

【解决方案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>

【讨论】：

【解决方案2】：

你可以添加

justify-content: space-between

到父元素。这样做时，子 flexbox 项目将对齐到相对的两侧，它们之间有空间。

【讨论】：