pタグで改行を回避する方法

104

タグを操作している間、どうすれば同じ行にとどまることができますか？

html css tags

— ジョシュ
ソース

画像とテキストでカルーセルを作成したい

— Josh

19

@ニシャント：次に、と言います。段落用です。

— スティーブハリソン

6

@Nishant：あなたがする必要がある場合には、強制的（例えばそれを作るなど、特定の方法で動作するようにタグをdisplay: inline;いうよりはdisplay: block;）、それは...あなたは間違ったタグを使用している可能性があることは良い兆候だ

— スティーブ・ハリソン

171

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

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

#container p { display: inline }

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

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

— ダグ・ネイナー
ソース

11

正しいCSSですが、元の質問のコメントの男の子は正しいです...なぜこれを行うのかを自問してください... SPANこの状況により適しているようです。

— one.beat.consumer 2011

5

スパンは同じであり、新しい行に進みません！one.beat.consumer言った

— Anicho

+1レスポンシブメディアクエリを使用してモバイルデバイスのスペースを節約するのに便利：D

— gef

私はangularJSで作業しており、「ng-repeat」で段落を繰り返す必要がありましたが、これは完全に機能しました。そしてスパンは私にエラーを与えました。

— sch 2015

出力がセパレータとしてタグを使用するプログラムを扱う場合、これが必要になります。たとえばDjangoフォーム。

— ジム・ポール

69

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

— スティーブ・ハリソン
ソース

1

これは受け入れられる答えになるはずです。質問に対する直接の回答はありませんが、おそらく問題のより良い解決策です。

— Fr4nc3sc0NL 2017年

19

私はCSSのためにこれに出くわしました

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

同様のスタックオーバーフローの質問を介して

— ackushiw
ソース

1

私はoverflow：hiddenを必要としませんでした。ありがとう

— StinkyCat

5

何かのようなもの：

p
{
    display:inline;
}

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

— ジョン・ボーカー
ソース

2

フレックスボックスは動作します。

.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>

スニペットを展開

— ロニー・ロイストン
ソース