Question

示例：

<h1>s</h1>
<h2>ame</h2>
<p>li</p>
<p>ne</p>

默认情况下，如何将所有这些元素放在同一行而不是将每个元素放在新行上。

真诚地感谢任何帮助：）

Answer 1

将display: inline或display: inline-block添加到元素的CSS中：

<h1>s</h1>
<h2>ame</h2>
<p>li</p>
<p>ne</p>

OUTPUT:
S
ame
li
ne

添加CSS：

<h1>s</h1>
<h2>ame</h2>
<p>li</p>
<p>ne</p>
<style>
    h1, h2, p {
        display: inline;
    }
</style>

OUTPUT:
Sa me li ne

Answer 2

这些（默认情况下）显示为块元素。

使用CSS，您可以改变他们的行为方式。

例如，默认情况下CSS中<h1>标记的CSS显示参数为：

h1 { display: block; }

要使其显示为内联，您可以执行以下操作：

h1 { display: inline-block; }

所以，如果你这样做：

h1, h2, p { display: inline-block; }

HTML代码的输出：

<h1>s</h1>
<h2>ame</h2>
<p>li</p>
<p>ne</p>

将是：

sameline

查看此答案，了解block和inline-block之间的差异： https://stackoverflow.com/a/14033814/1332068

Answer 3

我不知道您使用这些HTML元素的原因，但使用CSS可以实现它：

 <h1 style="display:inline-block">s</h1><h2 style="display:inline-block">ame</h2><p style="display:inline-block">li</p><p style="display:inline-block">ne</p>

如何将多个元素放在同一行？

3 个答案: