web-dev-qa-db-ja.com

pタグで改行を避ける方法は？

<p>タグを使用しているときに、同じ行に留まるにはどうすればよいですか？

htmlcsstags
87
Josh

display: inline CSSプロパティを使用します。

理想：スタイルシートで：

#container p { display: inline }

悪い/極端な状況：インライン：

<p style="display:inline">...</p>
154
Doug Neiner

<p>段落タグは、テキストの段落を指定するためのものです。テキストを新しい行で開始したくない場合は、<p>タグを誤って使用することをお勧めします。おそらく、<span>タグは、あなたが達成したいものにより密接に適合するでしょうか...？

55
Steve Harrison

私はCSSのためにこれに出会いました

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

同様のスタックオーバーフローの質問

17
ackushiw

何かのようなもの：

p
{
    display:inline;
}

スタイルシートでは、すべてのpタグに対してそれを行います。

4
John Boker

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
Ron Royston