Elenco non ordinato orizzontale con spazi

**Eugene** · 13-02-2009, 19:06

Buongiorno.
Nel realizzare un menù orizzontale attraverso l'uso di un elenco non ordinato mi si è ripresentato un problema avuto diverso tempo fa.

Questo il codice css:

codice:

ul, li{
margin: 0;
padding: 0;
list-style-type: none;
}

ul li a:link,ul li a:visited,ul li a:active,ul li a:hover,ul li a:focus{
	text-decoration: none;
	width: 80px;
	height: 30px;
	padding: 0;
	margin: 0;
	display: inline-block;
	text-align: center;
        background-color: #333333;
}

Infatti, con il seguente codice html viene riportato un piccolo spazio tra i tasti:

codice:

<ul>[*]link1[*]link2[*]link3[*]link4
<ul>

Se però il codice html si trova su un'unica riga, questo non succede:

codice:

<ul>[*]link1[*]link2[*]link3[*]link4
<ul>

Per quanto non si possa parlare di un vero è proprio errore, vorrei tuttavia capirne la causa e soprattutto sapere se è possibile eliminare questo inconveniente senza dover scrivere tutte le voci dell'elenco di seguito.

Grazie.

**ricman** · 16-02-2009, 10:49

A me non succede mai... Io non uso il display:inline-block ... preferisco il float:left sugli LI.
Poi bisogna anche vedere se e quale doctype usi..

**Eugene** · 16-02-2009, 11:19

Il doctype e xhtml transitional (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">).

Il display inline-block lo devo usare necessariamente altrimenti non mi vengono prese larghezza ed altezza del tasto.
Utilizzando il float credo otterrrei un risultato differente da quello deisderato.

**ricman** · 16-02-2009, 13:46

Originariamente inviato da Eugene
Il display inline-block lo devo usare necessariamente altrimenti non mi vengono prese larghezza ed altezza del tasto.
Utilizzando il float credo otterrrei un risultato differente da quello deisderato.

Non è vero...
Il float lo dai agli LI e poi le dimensioni (insieme a un display:block) le assegni ai tag A

**Eugene** · 16-02-2009, 15:35

Verifico e ti faccio sapere se ottengo il tuo stesso risultato.

Grazie.

**ricman** · 16-02-2009, 19:52

Originariamente inviato da Eugene
Verifico e ti faccio sapere se ottengo il tuo stesso risultato.

Fai sapere com'èandata

**Eugene** · 17-02-2009, 00:00

Funziona perfettamente, non ero a conoscenza di questo sistema.

Grazie mille.

**fcaldera** · 17-02-2009, 00:13

ritornando sul tuo problema originario dovresti impostare

ul, li {
white-space: nowrap
}

edit:
se desideri che inline-block funzioni anche su IE6 e 7 devi scrivere una regola successiva così:

ul li a {
*display: inline;
}

**ricman** · 17-02-2009, 01:21

Originariamente inviato da fcaldera
se desideri che inline-block funzioni anche su IE6 e 7 devi scrivere una regola successiva così:

ul li a {
*display: inline;
}

Mamma mia!! Ma quand'è toglieranno tutti 'sti arrangiamenti!!!

**Eugene** · 22-02-2009, 19:41

Piccolo dubbio: poichè anche la soluzione di fcaldera funziona, quale delle due mi si consiglia usare?
Ovvero, possono esistere delle controindicazioni nell'usare un metodo piuttosto che un altro?

Grazie.

Discussione: Elenco non ordinato orizzontale con spazi

Strumenti discussione

Ricerca discussione

Visualizza

Elenco non ordinato orizzontale con spazi

Permessi di invio