同一行有两个 p 标签

Question

我有两个 p 标签

<p style="margin: 0; display: inline;">content1</p>
<p style="margin: 0; display: inline;" align="right">content2</p>

输出是 content1content2 。我的期望是这样的：

 content1                                                                content2

谁能帮忙。我想要左边的“content1” p 和右边的“p”中的“content2”。

原文由 user3541562 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以为此使用 CSS flexbox 。以下是所请求布局的最小 CSS：

 <div style="display: flex; justify-content: space-between;">
  <p style="background-color: papayawhip;">Lorem ipsum dolor sit amet.</p>
  <p style="background-color: palegoldenrod;">Donec eget luctus lacus.</p>
</div>

对于较长的内容，您可以使用固定宽度的列：

 <div style="display: flex; justify-content: space-between;">
  <p style="flex-basis: 49.5%; background-color: papayawhip;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget luctus lacus. Cras consectetur elementum mi sed consequat.</p>
  <p style="flex-basis: 49.5%; background-color: palegoldenrod;">Pellentesque aliquet condimentum augue in mattis. Praesent sagittis nisl magna, a volutpat arcu imperdiet vel. Quisque et orci sed ligula cursus luctus.</p>
  <!-- 49.5% + 49.5% = 99%, remaining 1% is distributed according to justify-content -->
</div>

原文由 Salman A 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你可以用花车来做到这一点：

 <p style="margin:0;display:inline;float:left">content1</p>
<p style="margin:0;display:inline:float:right" >content2</p>

原文由 skzryzg 发布，翻译遵循 CC BY-SA 3.0 许可协议