como evitar uma nova linha com a tag p?

104

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

html css tags

— Josh
fonte

quero criar um carrossel com uma imagem e um texto

— Josh

19

@Nishant: Então use, digamos ,. 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

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 como separadores. Formulários Django, por exemplo.

— Jim Paul

69

A 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 tag incorretamente. Talvez a 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