Domanda

Ho il seguente pezzo HTML:

<span class='instruction_text'>
  Line 1<br>
  Line 2
</span>

E la dichiarazione CSS di instruction_text è:

.instruction_text {
  margin-left: 70px;
  font-style: italic;
  color: #555;
}

La prima linea ha un margine 70px come previsto, ma la riga successiva inizia senza trattino. Come posso fare tutte le linee frastagliate?

È stato utile?

Soluzione

Usa un elemento a livello di blocco. <div> è a livello di blocco di default, ma aggiungendo il display:block CSS per la classe instruction_text dovrebbe inviare nella giusta direzione.

Altri suggerimenti

L'uso dei nomi BR all'interno di un elemento SPAN non fare un sacco di senso, come SPAN in un elemento inline che significa che è pensato per essere utilizzato nel flusso di una riga di testo o altri elementi in linea.

Si dovrebbe utilizzare un elemento che è un "blocco" elemento di livello come DIV o P, per esempio uno che è stato progettato per contenere più righe di testo (o elementi in linea).

Come avrete notato, è possibile utilizzare un tag BR all'interno di uno SPAN e sarà causare un'interruzione di linea, tuttavia elementi inline non giocare bene con margini / padding ecc.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top