bagaimana cara menghindari baris baru dengan tag p?

104

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

html css tags

— Josh
sumber

ingin membuat korsel dengan gambar dan teks

— Josh

19

@ Nishant: Lalu gunakan, katakan ,. 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

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 sebagai pemisah. Bentuk Django misalnya.

— Jim Paul

69

The tag paragraf dimaksudkan untuk menentukan paragraf teks. Jika Anda tidak ingin teks dimulai pada baris baru, saya sarankan Anda menggunakan tag secara tidak benar. Mungkin 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