Comment convertir une liste avec des liens graphiques en une liste en ligne?

Question

Donné le HTML:

<ul id="topnav"> 
    <li id="topnav_galleries"><a href="#">Galleries</a></li> 
    <li id="topnav_information"><a href="#">Information</a></li> 
</ul> 

Et ce CSS:

#topnav_galleries a, #topnav_information a { 
    background-repeat: no-repeat; 
    text-indent: -9000px; 
    padding: 0; 
    margin: 0 0; 
    overflow: hidden; 
    height: 46px; 
    width: 136px; 
    display: block; 
} 
#topnav { list-style-type: none; } 
#topnav_galleries a { background-image: url('image1.jpg'); } 
#topnav_information a { background-image: url('image2.jpg'); } 

Comment pourrais-je aller à transformer la liste topnav dans une liste en ligne?

Answer 1

Essayez ceci:

#topnav { 
    overflow:hidden; 
} 
#topnav li { 
    float:left; 
} 

Et pour IE, vous devrez ajouter ce qui suit:

#topnav { 
    zoom:1; 
} 

Sinon, votre flottaient < li> balises débordera sur les contenant < ul>.

Answer 2

Donner les éléments de liste un width (50%?) Et float les ing left est plus fréquente depuis inline-block est pas pris en charge très bien.

Answer 3

Une alternative à flotter les éléments de gauche, est la suivante:

#topnav li { 
    display: inline; 
} 

Answer 4

Une autre approche serait d'utiliser display: inline-block pour li s:

#topnav li { 
    display: inline-block; 
}