Quando si crea una pagina Web, può essere utile utilizzare i CSS per centrare un elenco orizzontale, ad esempio un menu cliccabile. È possibile utilizzare CSS, che è una lingua del foglio di stile, al fianco di HTML per controllare l'aspetto della tua pagina Web. Gli stili CSS vengono spesso visualizzati in modo imprevedibile su diversi browser Web, quindi è importante testare pagine Web accuratamente prima di pubblicarlo. Una lista non ordinata (ul) è un elemento a livello di blocco, quindi è possibile utilizzare la proprietà width per creare un effetto centrato.

Istruzioni

1

Aprire il file HTML in un editor di testo come blocco note di Windows.

2

Aggiungere gli stili CSS necessari per l'elenco orizzontale nella sezione "< head >" del file HTML aggiungendo il codice seguente:

< style type = "text/css" >

.MyClass

{

text-align: center;

}

.MyClass ul

{

width: 275px;

margin: 0px auto

}

.MyClass li

{

display: block;

float: left;

height: 50px;

line-height: 50px;

margin: 5px;

width: 125px;

border: solid 1px black;

}

< / stile >

La larghezza dell'elenco (ul) è la somma della larghezza e i margini degli elementi orizzontali (li).

3

Creare un elenco orizzontale nella sezione "< body >" del file HTML aggiungendo il codice seguente:

< div class = "myclass" >

<ul>

<li>first item</li>

<li><div>second item in div</div></li>

</ul>

< / div >

Il tag "ul" specifica un elenco non ordinato. Il tag "li" corrisponde a un elemento nell'elenco. Gli elementi dell'elenco utilizzano gli stili CSS corrispondenti definiti in precedenza.

4

Salvare il file HTML e caricarlo sul server Web per visualizzare l'elenco orizzontale centrato.