display: block et menu horizontal

Version imprimable

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:

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:

1
2
 
li{display:inline;}

qui ne fonctionne pas à cause de :

Code:

1
2
 
a{display:block;}

Savez-vous quelle est la solution ?

21/12/2009, 13h35
Macmillenium
Bonjour,
Citation:
Envoyé par RootsRagga

Mais pour un menu horizontal je dois ajouter

Code:

1 2 li{display:inline;}
Pourquoi un display:inline ?
21/12/2009, 15h32
Candygirl

hello,

Tu peux utiliser la propriété float pour mettre tes li côtes à côtes.
21/12/2009, 15h36
O-Zone

+1, mettre sur le li

Code:

display:block;float:left;
21/12/2009, 17h51
RootsRagga

merci pour vos réponses
:ccool:
23/12/2009, 10h28
Macmillenium

Citation:

Envoyé par O-Zone

+1, mettre sur le li

Code:

display:block;float:left;

Citation:

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.

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

Le display:block est donc inutile.