como evitar uma nova linha com a tag p?

104

Como posso permanecer na mesma linha enquanto trabalho com a <p>tag?

html css tags Josh
fonte
quero criar um carrossel com uma imagem e um texto
Josh
19
@Nishant: Então use, digamos <span>,. <p>destina-se a parágrafos.
Steve Harrison
6
@Nishant: Quando você tem que forçar uma tag a se comportar de determinada maneira (como fazê-la em display: inline;vez de display: block;), é uma boa indicação de que você pode estar usando a tag errada ...
Steve Harrison

Respostas:

171

Use a display: inlinepropriedade CSS.

Ideal: na folha de estilo:

#container p { display: inline }

Situação ruim / extrema: Inline:

<p style="display:inline">...</p>
Doug Neiner
fonte
11
CSS correto, mas os meninos nos comentários da pergunta original estão certos ... pergunte-se por que você faria isso ... SPANparece mais adequado para esta situação.
one.beat.consumer
5
Span é o mesmo e não vai para uma nova linha! como one.beat.consumerdisse
Anicho
+1 Útil para economizar espaço em dispositivos móveis usando consultas de mídia responsivas: D
gef
Estou trabalhando no angularJS e precisei repetir um parágrafo com 'ng-repeat', funcionou perfeitamente. E Span apenas me deu erro.
sch
Isso seria necessário ao lidar com um programa cuja saída usa tags <p> como separadores. Formulários Django, por exemplo.
Jim Paul
69

A <p>tag de parágrafo serve para especificar parágrafos de texto. Se você não quiser que o texto comece em uma nova linha, sugiro que esteja usando a <p>tag incorretamente. Talvez a <span>tag se ajuste melhor ao que você deseja alcançar ...?

Steve Harrison
fonte
1
Esta deve ser a resposta aceita. Nenhuma resposta direta à pergunta, mas provavelmente a melhor solução para o problema.
Fr4nc3sc0NL
19

Me deparei com isso para css

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

via questão stackoverflow semelhante

ackushiw
fonte
1
Eu não precisava do estouro: escondido. Obrigado
StinkyCat de
5

algo como:

p
{
    display:inline;
}

em sua folha de estilo faria isso para todas as tags p.

John Boker
fonte
2

Flexbox funciona.

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

Ronnie Royston
fonte