如何避免使用p标签换行？

104

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

html css tags

— 乔希
source

想要创建带有图像和文字的轮播

— 乔什（Josh）2010年

19

@Nishant：然后使用。是指段落。

— 史蒂夫·哈里森

6

@Nishant：当您必须强制标签以某种方式运行（例如使其成为display: inline;而不是display: block;）时，这很好地表明您可能使用了错误的标签...

— Steve Harrison 2010年

171

使用display: inlineCSS属性。

理想：在样式表中：

#container p { display: inline }

不良/极端情况：内联：

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

— 道格·尼纳
source

11

正确的CSS，但原始问题注释中的男孩们是正确的……问自己为什么要这样做…… SPAN似乎更适合这种情况。

— one.beat.consumer 2011年

5

跨度相同，不会再换行！如one.beat.consumer说

— Anicho

+1有助于使用响应式媒体查询节省移动设备上的空间：D

— gef

我正在用angularJS工作，我需要用“ ng-repeat”重复一段，这很完美。Span只给了我错误。

— sch

在处理使用标记作为分隔符的程序时，可能需要使用此标记。例如，Django表单。

— Jim Paul

69

该段代码将用于指定文本段落。如果您不希望文本以新行开头，则建议您使用的标签不正确。也许标签更符合您想要实现的目标...？

— 史蒂夫·哈里森
source

1

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

— Fr4nc3sc0NL

19

我遇到了这个CSS

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

通过类似的stackoverflow问题

— 阿库施
source

1

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

— StinkyCat

5

就像是：

p
{
    display:inline;
}

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

— 约翰·博克
source

2

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>

展开摘要

— 罗尼·罗斯顿
source