p etiketli yeni bir satırdan nasıl kaçınılır?

105

Etiket ile çalışırken nasıl aynı hatta kalabilirim ?

html css tags

— Josh
kaynak

resim ve metin içeren bir atlı karınca oluşturmak istiyorum

— Josh

19

@Nishant: Öyleyse, söyle . paragraflar içindir.

— Steve Harrison

6

@Nishant: Bir etiketi belirli bir şekilde davranmaya zorlamanız gerektiğinde ( display: inline;yerine yapmak gibi display: block;), yanlış etiketi kullanıyor olabileceğinizin iyi bir göstergesidir ...

— Steve Harrison 6

173

display: inlineCSS özelliğini kullanın .

İdeal: Stil sayfasında:

#container p { display: inline }

Kötü / Olağanüstü durum: Satır içi:

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

— Doug Neiner
kaynak

12

Doğru CSS, ancak orijinal soru yorumlarındaki çocuklar haklı ... neden bunu yapacağınızı kendinize sorun ... SPANbu duruma daha uygun görünüyor.

— one.beat.consumer

5

Aralık aynıdır ve yeni bir satıra geçmez! olarak one.beat.consumeradı geçen

— Anicho

+1 Duyarlı medya sorguları kullanarak mobil cihazlarda yer

— kazanmak için kullanışlıdır

AngularJS'de çalışıyorum ve 'ng-tekrar' ile bir paragrafı tekrar etmem gerekiyordu, bu mükemmel çalıştı. Ve Span bana sadece hata verdi.

— sch

Çıktısının ayırıcı olarak etiketlerini kullanan bir programla uğraşırken buna ihtiyaç duyulur. Örneğin Django formları.

— Jim Paul

69

Paragraf etiketi metnin paragrafları belirterek içindir. Metnin yeni bir satırda başlamasını istemiyorsanız, etiketi yanlış kullanmanızı öneririm . Belki de etiket, ulaşmak istediğiniz şeye daha çok uyuyor ...?

— Steve Harrison
kaynak

1

Kabul edilen cevap bu olmalıdır. Sorunun doğrudan cevabı yok, ancak muhtemelen soruna daha iyi çözüm.

— Fr4nc3sc0NL

19

Css için buna rastladım

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

benzer yığın aşımı sorusu aracılığıyla

— ackushiw
kaynak

1

Taşmaya ihtiyacım yoktu: gizli. Teşekkürler

— StinkyCat

5

gibi bir şey:

p
{
    display:inline;
}

stil sayfanızda bunu tüm p etiketleri için yapardı.

— John Boker
kaynak

2

Flexbox çalışıyor.

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

Snippet'i genişlet

— Ronnie Royston
kaynak