Html 同一行中的两个 p 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23310736/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Two p tag in same line
提问by user3541562
I have two ptags
我有两个p标签
<p style="margin: 0; display: inline;">content1</p>
<p style="margin: 0; display: inline;" align="right">content2</p>
The Output is content1content2. My expectation is like this:
输出是content1content2。我的期望是这样的：
content1 content2
Can anyone help. I want one "content1" in the left pand "content2" in the right 'p'.
任何人都可以帮忙。我想要左边的p“content1”和右边的“p”中的“content2”。
回答by Salman A
This should work:
这应该有效：
<div style="overflow: hidden;">
<p style="float: left;">content1</p>
<p style="float: right;">content2</p>
</div>
If the two paragraphs contain wide content (e.g. few lines of text) then you need to add width on paragraphs as well.
如果两个段落包含较宽的内容（例如几行文本），那么您还需要在段落上添加宽度。
回答by skzryzg
You could do it with floats:
你可以用浮动来做到这一点：
<p style="margin:0;display:inline;float:left">content1</p>
<p style="margin:0;display:inline:float:right" >content2</p>
回答by ToMic
The idea of the tag <p></p>is to display a paragraph. So HTML offers you the <div></div>which is a container conecpt. So you should use Salman A's Solution, because there aren't just different tags in html for no reason. Actually you can style a paragraph with css so it is getting displayed the same as a div container, but it is not meant to be like that.
I don't want to say to you, what you have to do. I just wanna help you using the "correct" tags for the things they were made for.
标签的想法<p></p>是显示一个段落。所以 HTML 为您提供了<div></div>一个容器 concpt。所以你应该使用 Salman A 的解决方案，因为 html 中没有无缘无故的不同标签。实际上，您可以使用 css 为段落设置样式，使其与 div 容器的显示方式相同，但这并不意味着如此。我不想对你说，你必须做什么。我只是想帮助您使用“正确”的标签来标记它们的用途。
回答by Ray Butterworth
What you really want is something that doesn't assume sufficent width to fit both paragraphs into one line:
你真正想要的是没有足够的宽度来将两个段落放在一行中的东西：
* { 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>