Voci di elenco orizzontale CSS

Question

Quindi, ho tentato di creare un elenco orizzontale da utilizzare in un nuovo sito Web che sto progettando. Ho tentato un numero di suggerimenti già trovati online come l'impostazione 'float' a sinistra e così via - ma nessuno di questi ha funzionato quando si trattava di risolvere il problema.

ul#menuItems { 
 
     background: none; 
 
     height: 50px; 
 
     width: 100px; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    ul#menuItems li { 
 
     display: inline; 
 
     list-style: none; 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
     top: 0px; 
 
     height: 50px; 
 
    } 
 
    ul#menuItems li a { 
 
     font-family: Arial, Helvetica, sans-serif; 
 
     text-decoration: none; 
 
     font-weight: bolder; 
 
     color: #000; 
 
     height: 50px; 
 
     width: auto; 
 
     display: block; 
 
     text-align: center; 
 
     line-height: 50px; 
 
    }

<ul id="menuItems"> 
 
    <li> 
 
    <a href="index.php">Home</a> 
 
    </li> 
 
    <li> 
 
    <a href="index.php">DJ Profiles</a> 
 
    </li> 
 
</ul>

Attualmente non sono sicuro di ciò che sta causando il problema, come potrei fare per e risolverlo?

Answer 1

risposta Aggiornato

ho notato un sacco di persone stanno usando questa risposta così ho deciso di aggiornare un po '. Se vuoi vedere la risposta originale, controlla di seguito. La nuova risposta dimostra come è possibile aggiungere un po 'di stile alla tua lista.

ul > li { 
 
    display: inline-block; 
 
    /* You can also add some margins here to make it look prettier */ 
 
    zoom:1; 
 
    *display:inline; 
 
    /* this fix is needed for IE7- */ 
 
}

<ul> 
 
    <li> <a href="#">some item</a> 
 

 
    </li> 
 
    <li> <a href="#">another item</a> 
 

 
    </li> 
 
</ul>

Answer 2

Un modo migliore è quello di utilizzare inline-block, perché non c'è bisogno di usare clear:both alla fine della vostra lista più.

Prova questo:

<ul> 
    <li> 
     <a href="#">some item</a> 
    </li> 
    <li> 
     <a href="#">another item</a> 
    </li> 
</ul> 

CSS:

ul > li{ 
    display:inline-block; 
} 

Dai un'occhiata alla qui: http://jsfiddle.net/shahverdy/4N6Ap/

Answer 3

Questo violino mostra come

http://jsfiddle.net/9th7X/

ul, li { 
    display:inline 
} 

grandi riferimenti sulle liste e css qui:

http://alistapart.com/article/taminglists/

Answer 4

Si potrebbe anche usare blocchi in linea per evitare elementi

<ul> 
    <li> 
     <a href="#">some item</a> 
    </li> 
    <li> 
     <a href="#">another item</a> 
    </li> 
</ul> 

e poi lo stile come galleggiante:

li{ 
    /* with fix for IE */ 
    display:inline; 
    display:inline-block; 
    zoom:1; 
    /* 
    additional styles to make it look nice 
    */ 
} 

in questo modo non avrai bisogno di galleggiare nulla, eliminando th E bisogno di clearfix

Answer 5

Here è possibile trovare un esempio funzionante, con alcuni suggerimenti sul ridimensionamento dinamico della lista.

ho usato display: inline-block e una percentuale imbottitura in modo che l'elenco genitore può cambiare dinamicamente dimensioni:

display:inline-block; 
padding:10px 1%; 
width: 30% 

più altri due regole per rimuovere imbottitura per i primi e gli ultimi articoli.

ul#menuItems li:first-child{padding-left:0;} 
ul#menuItems li:last-child{padding-right:0;}