两个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

这应该有效：

<div style="overflow: hidden;">
    <p style="float: left;">content1</p>
    <p style="float: right;">content2</p>
</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>这是一个容器conecpt。所以你应该使用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

您可以给他们一个ID 并使用float选项。 希望它对你有用，看看我的 website 我在那边用过，但是在一个标签中，p标签使用了下面和上面可以看到的东西

<p id = "content1">content1</p>
  <p id = "content2">content2</p>
<style>
#content1 {
float:left
}
#content2{
float:right
}
</style>

Answer 6

float:left，float:right ....或

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