¿Cómo evitar una nueva línea con etiqueta p?

104

¿Cómo puedo permanecer en la misma línea mientras trabajo con la etiqueta?

html css tags

— Josh
fuente

quiero crear un carrusel con una imagen y texto

— Josh

19

@Nishant: A continuación, utilice, por ejemplo, . está destinado a los párrafos.

— Steve Harrison

6

@Nishant: Cuando tienes que forzar a una etiqueta a comportarse de cierta manera (como hacerlo en display: inline;lugar de display: block;), es una buena indicación de que podrías estar usando la etiqueta incorrecta ...

— Steve Harrison

171

Utilice la display: inlinepropiedad CSS.

Ideal: en la hoja de estilo:

#container p { display: inline }

Situación mala / extrema: Inline:

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

— Doug Neiner
fuente

11

CSS correcto, pero los chicos en los comentarios de la pregunta original tienen razón ... pregúntate por qué harías esto ... SPANparece más adecuado para esta situación.

— one.beat.consumer

5

¡Span es el mismo y no pasa a una nueva línea! como se one.beat.consumerdijo

— Anicho

+1 Útil para ahorrar espacio en dispositivos móviles mediante consultas de medios receptivas: D

— gef

Estoy trabajando en angularJS, y necesitaba repetir un párrafo con 'ng-repeat', esto funcionó perfectamente. Y Span solo me dio un error.

— sch

Uno necesitaría esto cuando se trata de un programa cuya salida usa etiquetas como separadores. Formas de Django, por ejemplo.

— Jim Paul

69

La etiqueta de párrafo está destinada a especificar párrafos de texto. Si no desea que el texto comience en una nueva línea, le sugiero que esté usando la etiqueta de manera incorrecta. ¿Quizás la etiqueta se ajusta más a lo que desea lograr ...?

— Steve Harrison
fuente

1

Esta debería ser la respuesta aceptada. No hay respuesta directa a la pregunta, pero probablemente sea la mejor solución al problema.

— Fr4nc3sc0NL

19

Me encontré con esto para css

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

a través de una pregunta similar de stackoverflow

— ackushiw
fuente

1

No necesitaba el desbordamiento: oculto. Gracias

— StinkyCat

5

algo como:

p
{
    display:inline;
}

en su hoja de estilo lo haría para todas las etiquetas p.

— John Boker
fuente

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 fragmento

— Ronnie Royston
fuente