Come aumentare imbottitura su di un elenco puntato

December 22

Come aumentare imbottitura su di un elenco puntato


L'aggiunta di imbottitura per elenchi puntati è utile quando è necessario modificare il valore predefinito guardare un browser può rendere il codice di lista non ordinata (una lista ordinata è reso con numeri, lettere o numeri romani) e / o quando si desidera aggiungere spaziatura aggiuntiva tra il proiettile e il testo nel contenuto. Un metodo semplice ed efficace per farlo è quello di usare i CSS (foglio di stile CSS) di codifica e applicarlo sia a un elenco specifico o per tutte le liste non ordinate (o ordinato). Questo codice può essere collocato nel documento HTML o in un file separato, si fa riferimento.

istruzione

1 Il primo passo è quello di determinare dove la vostra lista sarà afferrare il codice CSS da. Entrambi i modi vengono nidificati nel tag <head>. È possibile inserire il codice CSS direttamente nel documento HTML. Questo è utile se si dispone di un paio di righe di codice CSS da aggiungere. Si può anche chiedere il documento HTML per ottenere il codice CSS da un documento esterno. Ecco come appare:

CSS direttamente nel <head>

<Head>

<Style type = "text / css">

<! -

ul {

padding: 5 px;

}

->

</ Style>

</ Head>

documento CSS riferimento in <head>

<Head>

<Link href = "URL o la posizione del file / nameofcssdocument.css" rel = "stylesheet" type = "text / css" />

</ Head>

2 Il codice CSS in sé è molto semplice, ma è comunque necessario fare un'altra scelta: è il codice andando ad incidere tutte le liste non ordinate, o una lista non ordinata in una sezione specifica del suo sito web?

Per tutte le liste non ordinate, inserire questo codice nel CSS. Questo esempio ci istruisce per aggiungere 5 pixel all'imbottitura di tutte le liste di proiettile:

ul {

padding: 5 px;

}

3 Si può avere un documento con diversi elenchi puntati e si consiglia di cambiare l'aspetto di alcuni o una delle liste. In tal caso, è possibile creare un tag ID nel CSS. Il tag # indica che il vostro elemento CSS è un ID. Ecco il codice:

specialpadding {

padding: 5px;

}

Il passo successivo è quello di fare riferimento a questo nel codice in un elenco che si desidera applicare il CSS a; qui è esempio di codice:

<Ul id = "specialpadding">

<Li> punto 1 </ li>

<Li> punto 2 </ li>

</ Ul>

4 È possibile aggiungere padding a sinistra oa destra del proiettile. Per aggiungere a sinistra, usare padding-left, o padding-right, ad esempio:

ul {

padding-left: 5 px;

}

Consigli e avvertenze

  • È possibile denominare gli ID qualche cosa vuoi, basta scambiare fuori #specialpadding, con tutto ciò che si desidera chiamare il proprio ID.
  • L'unità di imbottitura può essere espressa in pixel, punti, o .EM, a seconda di quale misura è adatto per la progettazione.
  • Ricordarsi di chiudere tutti i tag e il codice CSS per una corretta interpretazione. codice CSS si chiude con un ";" seguito da un "}".