并排显示 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' 写什么？

回答：我为 类 都尝试了 "display:inline"，但没有成功

Answer 1

.firstClass, .secondClass {display: inline;}

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

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

如果这没有帮助，您可以使用这个糟糕的技巧（作为最后的手段）：

.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/