我已经创建了一些代码来打印一些数据。
<!DOCTYPE html>
<html>
<body>
<h1>The p element</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
结果如下:
The p element
This is a paragraph.
This is a paragraph.
This is a paragraph.
但是我想做的是在不删除<p>标记的情况下连接这三行。
我的预期结果是:
The p element
This is a paragraph. This is a paragraph. This is a paragraph.
如上所述，稍微改变一下结构就可以达到目的。只需将三个p元素包装成一个div，然后使用flexbox。
.wrapper {
display: flex;
align-items: center;
}<h1>The p element</h1>
<div class="wrapper">
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</div>你可以这样修改css:
p {
display: inline;
}
为了实现这一点，不需要添加到DOM中，并且保持您可能不应该的语义。
可以使用CSS将p元素显示为inline-block。
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: inline-block;
}
</style>
</head>
<body>
<h1>The p element</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>您可以添加display:inline对p标记:
p {
display: inline
}<!DOCTYPE html>
<html>
<body>
<h1>The p element</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>使用display: flex和flex-direction: row，可选择包括gap:
<!DOCTYPE html>
<html lang="en">
<head>
<title>The p element</title>
<style>
.wrapper {
display: flex;
flex-direction: row;
gap: 4px;
}
</style>
</head>
<body>
<h1>The p element</h1>
<div class="wrapper">
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</div>
</body>
</html>详情见此处