如何避免带有 p 标签的新行？答案

【问题标题】：how to avoid a new line with p tag?如何避免带有 p 标签的新行？
【发布时间】：2011-01-05 18:36:04
【问题描述】：

如何在使用 标签时保持在同一行？

【问题讨论】：

想用图片和文字创建一个轮播
@Nishant：然后使用，比如说，。  用于段落。
@Nishant：当您必须强制标签以某种方式运行时（例如使其成为display: inline; 而不是display: block;），这很好地表明您可能使用了错误的标签...
@Nishant 是我吗？

【解决方案1】：

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>

【讨论】：

【解决方案2】：

我在 css 中遇到了这个

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

通过similar stackoverflow question

【讨论】：

我不需要溢出：隐藏。谢谢

【解决方案3】：

类似：

p
{
    display:inline;
}

在您的样式表中将为所有 p 标签执行此操作。

【讨论】：

【解决方案4】：

 段落标签用于指定文本段落。如果您不希望文本从新行开始，我建议您错误地使用  标签。也许 标签更符合您想要实现的目标...？

【讨论】：

这应该是公认的答案。没有直接回答这个问题，但可能是解决问题的更好方法。

【解决方案5】：

使用display: inline CSS 属性。

理想：在样式表中：

#container p { display: inline }

糟糕/极端情况：内联：

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

【讨论】：

正确的 CSS，但原始问题 cmets 中的男孩是对的...问问自己为什么要这样做...SPAN 似乎更适合这种情况。
Span 是一样的，不会换行！正如one.beat.consumer 所说
+1 有助于使用响应式媒体查询在移动设备上节省空间：D
我在 angularJS 中工作，我需要用 'ng-repeat' 重复一个段落，这非常有效。而 Span 只给了我错误。
在处理一个输出使用
标记作为分隔符的程序时需要这个。例如 Django 表单。