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

104

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

html css tags Josh
fuente
quiero crear un carrusel con una imagen y texto
Josh
19
@Nishant: A continuación, utilice, por ejemplo, <span>. <p>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

Respuestas:

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 <p> como separadores. Formas de Django, por ejemplo.
Jim Paul
69

La <p>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 <p>etiqueta de manera incorrecta. ¿Quizás la <span>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
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