allineamento orizzontale di una lista

**stefy81** · 29-12-2011, 18:42

Buongiorno,
io devo creare la mappa di un sito
e vorrei fosse così:

codice:

       Home
       Ristorante
           • Pizzeria •  • Menù ristorante • • Menù cerimonie •
       Hotel
           • Prezzi •  • Disponibilità •
       Karaoke
       Servizi
       Gallery
       Contatti
       Dove Siamo
       Mappa Sito

invece viene così

codice:

       Home
       Ristorante
           • Pizzeria •  • Menù ristorante • • Menù cerimonie •
       Hotel
           • Prezzi •  • Disponibilità •  Karaoke
       Servizi
       Gallery
       Contatti
       Dove Siamo
       Mappa Sito

il mio codice html è questo

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it"> 
<head>
	<link rel="stylesheet" type="text/css" href="css/mappaSito.css" />
</head>
<body>
<div class="mappaSito">
	<ul>
		[*]Home
		[*]
			Ristorante

			<ul>
				[*]&bull; Pizzeria &bull;
				[*]&bull; Men&ugrave; ristorante &bull;
				[*]&bull; Men&ugrave; cerimonie &bull; 
			[/list]

		
		[*]Hotel
			<ul>
				[*]&bull; Prezzi &bull;
				[*]&bull; Disponibilit&agrave; &bull;
			[/list]

		
		[*]Karaoke
		[*]Servizi
		[*]Gallery
		[*]Contatti
		[*]Dove Siamo

		[*]Mappa Sito
	[/list]
</div>
</body>
</html>

mentre il css è

codice:

.mappaSitoImg {
	float: left;	
}
.mappaSito, .mappaSito ul, .mappaSito li{
	padding:0;	
	margin:0;
}
.mappaSito{
	padding-top: 40px;
	padding-left: 250px;
}
.mappaSito li{   
	list-style: none;
	padding:0 20px;
	line-height: 23px;
}
.mappaSito li a{
	text-decoration:none;
	color:#38060D;
	font-weight:bold;
	font-size:11px;
	text-transform:uppercase;
	letter-spacing:1px;
}
.mappaSito li li{
	float: left;
}

Non riesco a spostare la scritta karaoke sotto.
Qualcuno sa come fare?
Ciao ste e buon anno

**LaboratorioCSS** · 29-12-2011, 23:17

invece del float:left metti il display:inline

codice:

.mappaSito li li{
display:inline;
}

**stefy81** · 29-12-2011, 23:19

grazie mille

non ci avevo minimamente pensato

Discussione: allineamento orizzontale di una lista

Strumenti discussione

Ricerca discussione

Visualizza

allineamento orizzontale di una lista

Permessi di invio