并排显示2 <p>

Question

我想并排显示2个段落。

<p class = "firstClass">This is first line.</p>
<p class = "secondClass">This is second line.</p>

输出：

This is first line.
This is second line.

期望的输出：

This is first line.This is second line.

要实现所需的输出，我应该在css文件中为类'firstClass'，'secondClass'写什么？

答案：我尝试了两种类的“显示：内联”，然后它没有工作

Answer 1

.firstClass, .secondClass {display: inline;}

如果其他CSS覆盖此显示设置，请使用以下方法增加选择器特异性：

#parent_id .firstClass, #parent_id .secondClass {display: inline;}

如果这没有用，你可以使用这个AWFUL技巧（作为最后的手段）：

.firstClass, .secondClass {display: inline!important;}

Answer 2

默认情况下，段落是块级元素。将其更改为内联或内联块：

.firstClass, .secondClass { display:inline }

.firstClass, .secondClass { display:inline }

<p class = "firstClass">This is first line.</p>
<p class = "secondClass">This is second line.</p>

Answer 3

您可以使用display: inline-block查看示例https://jsfiddle.net/jftf8a39/1/

您可以使用display: inline查看示例https://jsfiddle.net/jftf8a39/5/

您可以在父级上使用display: flex，请参阅示例https://jsfiddle.net/jftf8a39/3/

您可以使用float: left查看示例https://jsfiddle.net/jftf8a39/4/