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


105

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


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

19
@Nishant: Öyleyse, söyle <span>. <p>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

Yanıtlar:


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>

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 <p> etiketlerini kullanan bir programla uğraşırken buna ihtiyaç duyulur. Örneğin Django formları.
Jim Paul

69

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


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


5

gibi bir şey:

p
{
    display:inline;
}

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


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>

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.