display: block et menu horizontal

**RootsRagga** · 20/12/2009, 23h21

Bonjour,

Je rencontre des difficultés pour faire que la balise <a> remplisse la balise <li> qui la contient dans un menu horizontal.

Sur un menu vertical la fonction display:block le permet:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>menu</title>
	<style type="text/css">
		li{
			height:40px;
			background:#aaaaaa;
			width:300px;
			margin:10px 0;
			list-style-type:none;
		}
		a{
			background:#ffff00;
			height:40px;
			display:block;
			width:300px;
 
		}
	</style>
 
</head>
<body>
	<ul>
		<li><a href="#">menu 1</a></li>
		<li><a href="#">menu 2</a></li>
	</ul>
</body>
 
</html>

Mais pour un menu horizontal je dois ajouter

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
li{display:inline;}

qui ne fonctionne pas à cause de :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
a{display:block;}

Savez-vous quelle est la solution ?

**Macmillenium** · 21/12/2009, 13h35

Bonjour,

Envoyé par RootsRagga

Mais pour un menu horizontal je dois ajouter

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
li{display:inline;}

Pourquoi un display:inline ?

**Candygirl** · 21/12/2009, 15h32

hello,

Tu peux utiliser la propriété float pour mettre tes li côtes à côtes.

**O-Zone** · 21/12/2009, 15h36

+1, mettre sur le li

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

display:block;float:left;

**RootsRagga** · 21/12/2009, 17h51

merci pour vos réponses

**Macmillenium** · 23/12/2009, 10h28

Envoyé par O-Zone

+1, mettre sur le li

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

display:block;float:left;

Envoyé par CSS2

Une boîte flottante doit avoir une largeur explicite (spécifiée par la propriété 'width' ou la largeur intrinsèque pour les éléments remplacés). Ces boîtes deviennent des boîtes de bloc qui sont mues vers la gauche ou la droite et qui vont buter sur le bord du bloc conteneur ou sur le bord externe d'un autre flottant. Leur haut s'aligne sur le haut de la boîte de ligne concernée (ou, quand il n'y a pas de boîte de ligne, sur le bas de la boîte de bloc précédente). Quand il n'y a pas assez de place pour le flottant dans la largeur de la ligne, celui-ci se déplace vers le bas, d'une ligne à l'autre, jusqu'à en trouver une suffisamment large.

http://www.w3schools.com/css/pr_class_float.asp

Le display:block est donc inutile.

display: block et menu horizontal

CSS

Vue hybride

Discussions similaires

Partager

Partager