同一行中的两个 p 标签

Question

我有两个p标签

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

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

content1                                                                content2 

任何人都可以帮忙。 我想要左侧p中有一个“content1”，右侧“p”中有一个“content2”。

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>

Answer 2

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

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

Answer 3

标签<p></p>的想法是显示一个段落。 因此，HTML 为您提供了<div></div> ，它是一个容器连接。 所以你应该使用 Salman A 的解决方案，因为 html 中不只是无缘无故的不同标签。 实际上，您可以使用 css 为段落设置样式，使其显示为与 div 容器相同，但这并不意味着那样。 我不想对你说，你必须做什么。 我只是想帮助您使用“正确”标签来标记它们的用途。

Answer 4

您真正想要的是没有足够的宽度以将两个段落都放入一行的内容：

 * { box-sizing: border-box; } .two { width: 30em; max-width: 100%; } .two p { display: inline-block; max-width: 50%; } .two p:nth-child(1) { float:left; } .two p:nth-child(2) { float:right; }

 <div class="two"> <p>This is the first paragraph of two.</p> <p>This is the second paragraph of two.</p> </div>

Answer 5

这是实现这一目标的另一个快速转变：

 p{ text-align: center; } .item p{ display: inline-block; } .leftContent{ text-align: left; width: 50%; } .rightContent{ text-align: right; width: 50% }

 <br> <!--Use both P tags in the same line without space --> <article class="item"> <p class="leftContent">Content1</p><p class="rightContent">Content2</p> </article>

Answer 6

float:left , float:right .... 或

width:49.9%;
display:inline;
text-align:left;
text-align:right;