<分区>
我有这个:
<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>我希望第一个 span 向左对齐，第二个向右对齐，这是有效的，但它们出现在不同的行上。
对 flex 很陌生。
最佳答案
I want the first span to be snapped to the left, and the second one to the right
您可以使用 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>关于CSS 左右对齐文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57727689/