如何避免使用带有“ p”标记的新行

在使用 <p>标记时，如何保持在同一行上？

我想创建一个带有图像和文本的旋转木马。

345305 次浏览

小开

最佳答案

使用 display: inline CSS 属性。

理想状态: 在样式表中:

#container p { display: inline }

坏/极端情况: 内联:

<p style="display:inline">...</p>

小开

<p>段落标记用于指定文本段落。如果您不希望文本以新行开始，我建议您错误地使用了 <p>标记。也许 <span>标签更符合你想要达到的效果... ？

小开

差不多

p
{
display: inline;
}

对于所有的 P标记都是如此。

小开

我在 CSS 上找到了这个,

span, p{overflow: hidden; white-space: nowrap;}

通过类似的堆栈溢出问题。

小开

Flexbox 工作。

.box{
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-content: center;
align-items: center;
border: 1px solid #e3f2fd;
}
.item{
flex: 1 1 auto;
border: 1px solid #ffebee;
}

<div class="box">
<p class="item">A</p>
<p class="item">B</p>
<p class="item">C</p>
</div>