come evitare una nuova riga con tag p?

104

Come posso rimanere sulla stessa riga mentre lavoro con il tag?

html css tags

— Josh
fonte

desidera creare una giostra con un'immagine e un testo

— Josh

19

@Nishant: Quindi utilizzare, ad esempio, . è pensato per i paragrafi.

— Steve Harrison

6

@Nishant: Quando devi forzare un tag a comportarsi in un certo modo (come renderlo display: inline;anziché display: block;), è una buona indicazione che potresti utilizzare il tag sbagliato ...

— Steve Harrison

171

Usa la display: inlineproprietà CSS.

Ideale: nel foglio di stile:

#container p { display: inline }

Situazione grave / estrema: in linea:

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

— Doug Neiner
fonte

11

Correggi CSS, ma i ragazzi nei commenti alla domanda originale hanno ragione ... chiediti perché dovresti farlo ... SPANsembra più adatto a questa situazione.

— one.beat.consumer

5

Span è lo stesso e non va su una nuova linea! come one.beat.consumerdetto

— Anicho

+1 Utile per risparmiare spazio sui dispositivi mobili utilizzando query multimediali reattive: D

— gef

Sto lavorando in angularJS e avevo bisogno di ripetere un paragrafo con "ng-repeat", ha funzionato perfettamente. E Span mi ha dato solo errore.

— sch

Sarebbe necessario quando si ha a che fare con un programma il cui output utilizza i tag come separatori. I moduli Django per esempio.

— Jim Paul,

69

Il tag di paragrafo serve per specificare paragrafi di testo. Se non desideri che il testo inizi su una nuova riga, ti suggerisco di utilizzare il tag in modo errato. Forse il tag si adatta meglio a ciò che vuoi ottenere ...?

— Steve Harrison
fonte

1

Questa dovrebbe essere la risposta accettata. Nessuna risposta diretta alla domanda, ma probabilmente la migliore soluzione al problema.

— Fr4nc3sc0NL

19

Mi sono imbattuto in questo per css

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

tramite una domanda simile di stackoverflow

— ackushiw
fonte

1

Non avevo bisogno dell'overflow: nascosto. Grazie

— StinkyCat

5

qualcosa di simile a:

p
{
    display:inline;
}

nel tuo foglio di stile lo farebbe per tutti i tag p.

— John Boker
fonte

2

Flexbox funziona.

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

Espandi lo snippet

— Ronnie Royston
fonte