web-dev-qa-db-fra.com

Comment rendre <li> côte à côte?

Je cherche à créer un menu de navigation avec des éléments de liste rendus sur une seule ligne. Comment puis-je faire cela?

htmlcsshtml-lists
29
Upcyclist
li {
    display: inline;
}

EDIT: Je comprends maintenant pourquoi je me sentais bizarre de répondre avec display: inline: parce que j'utilise habituellement float: left moi-même à la place, ce qui est la réponse d'Anthony-Arnold (donc à lui va mon vote positif!).

Quoi qu'il en soit, bien que l'une ou l'autre méthode entraîne l'affichage de vos li sur une seule ligne, les éléments en ligne et les éléments flottants se comportent différemment. Selon le style de votre mise en page, vous devrez peut-être choisir l'un ou l'autre.

42
BoltClock

Vous pouvez également le faire, dans certaines situations:

 li {
 flotteur: gauche; 
}
16
Anthony

Ma façon préférée de le faire est d'utiliser, car elle permet d'utiliser la largeur, la hauteur, les marges et le rembourrage:

li { display: inline-block; }

Mais ayez un problème de rendu dans IE, pour corriger l'utilisation (l'ordre est important):

li 
{ 
  display: inline-block; 
  zoom: 1;
  *display: inline;
}
8
Cesar

L'une des meilleures ressources sur le sujet est http://css.maxdesign.com.au/listamatic/ (un peu dépassé cependant).

Ils suggèrent à la fois li {display: inline;} et li {float: left;} selon l'effet souhaité.

Regardez par exemple leur "Liste horizontale simple" http://css.maxdesign.com.au/listamatic/horizontal01.htm

3
Eelvex
ul {display: inline;} 
ul li { list-style: none;display: inline;}
1
joe

vous allez essayer ce style

li{
height:20px;
float:left;
list-style-type: none;
width:70px;
padding:3px;
border-right:1px solid #3687AF;
background-color: #015287;
background-repeat: no-repeat;
background-position: center 30px;
}

cela fonctionnera pour vous bien sûr ...

1
Subbu
ul {
    float: right;  to <li> go to the Right or Left side
}

ul li {
    display: inline-block;
    padding: 10px;
    margin-top: 5px;
}

Si vous utilisez le "float:" dans le "li", la liste inversera la séquence.

1
Rafael Rodrigues

Vous pourriez faire:

li {
    float: left;
    display: inline;
}

Si vous souhaitez conserver ses caractéristiques de bloc mais avez toujours besoin de côte à côte, vous pouvez faire:

li {
    float: left;
    display: inline-block;
}
0
Sarfraz