bagaimana cara menghindari baris baru dengan tag p?

104

Bagaimana saya bisa tetap di baris yang sama saat bekerja dengan <p>tag?

html css tags Josh
sumber
ingin membuat korsel dengan gambar dan teks
Josh
19
@ Nishant: Lalu gunakan, katakan <span>,. <p>dimaksudkan untuk paragraf.
Steve Harrison
6
@ Nishant: Ketika Anda harus memaksa tag untuk berperilaku dengan cara tertentu (seperti membuatnya display: inline;daripada display: block;), itu adalah indikasi yang baik bahwa Anda mungkin menggunakan tag yang salah ...
Steve Harrison

Jawaban:

171

Gunakan display: inlineproperti CSS.

Ideal: Di lembar gaya:

#container p { display: inline }

Situasi Buruk / Ekstrem: Inline:

<p style="display:inline">...</p>
Doug Neiner
sumber
11
CSS yang benar, tetapi anak laki-laki dalam komentar pertanyaan asli benar ... tanyakan pada diri Anda mengapa Anda melakukan ini ... SPANtampaknya lebih cocok untuk situasi ini.
one.beat.consumer
5
Spannya sama dan tidak berpindah ke baris baru! seperti yang one.beat.consumerdikatakan
Anicho
+1 Berguna untuk menghemat ruang di perangkat seluler menggunakan kueri media yang responsif: D
gef
Saya bekerja di angularJS, dan saya perlu mengulangi paragraf dengan 'ng-repeat', ini bekerja dengan sempurna. Dan Span hanya memberi saya kesalahan.
SCH
Seseorang akan membutuhkan ini ketika berhadapan dengan program yang keluarannya menggunakan tag <p> sebagai pemisah. Bentuk Django misalnya.
Jim Paul
69

The <p>tag paragraf dimaksudkan untuk menentukan paragraf teks. Jika Anda tidak ingin teks dimulai pada baris baru, saya sarankan Anda menggunakan <p>tag secara tidak benar. Mungkin <span>tag lebih cocok dengan apa yang ingin Anda capai ...?

Steve Harrison
sumber
1
Ini harus menjadi jawaban yang diterima. Tidak ada jawaban langsung atas pertanyaan tersebut, tetapi mungkin merupakan solusi yang lebih baik untuk masalah tersebut.
Fr4nc3sc0NL
19

Saya menemukan ini untuk css

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

melalui pertanyaan stackoverflow serupa

ackushiw
sumber
1
Saya tidak membutuhkan overflow: hidden. Terima kasih
StinkyCat
5

sesuatu seperti:

p
{
    display:inline;
}

di stylesheet Anda akan melakukannya untuk semua tag p.

John Boker
sumber
2

Flexbox berfungsi.

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

Ronnie Royston
sumber