Séparation en border en li ne prennent pas toute la hauteur

Bonjour,

j'essaye en vain de faire apparaitre une border de séparation sur toute la hauteur de ma div entre les li de mes menus.

Voici mon code :

ul, li, a {
	padding:0; 
	margin:0;
}
ul, li {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}
#dMenu{
	
	height: 48px;
	border: 1px solid #f06a27;
        background-color: blue;
}
#dMenu ul{
	margin: 0;
	padding:0;
	color: #fff;
}
#dMenu li{
	border-width: 0 1px 0 0;
	border-color: #fa8e02;
	border-style: solid;
	display: inline;
	padding: 0 12px 0 12px;
	line-height: 48px;
}

<div id="dMenu">
					<ul>
						<li>Item 1</li>
						<li>Item 2</li>
                                         </ul>
				</div>

Merci d'avance pour votre aide.
Modifié par shadeoner (24 Aug 2009 - 15:40)

Bonjour,

Qu'est-ce qui ne marche pas comme tu veux ?

J'aimerais que les borders de li prennent toute la largeur de la div/ul

Salut,

Ca vient de ton display: inline; je pense.

shadeoner a écrit :
J'aimerais que les borders de li prennent toute la largeur de la div/ul

Tu veux dire toute la hauteur...

Et effectivement, c'est lié au display:inline. Le line-height ne s'applique pas de la même manière pour un élément en display:block ou en display:inline. Et à priori ce n'est de toute façon pas la bonne manière de procéder.

Il vaudrait mieux placer tes LI côte-à-côte en utilisant le positionnement flottant, et utiliser la propriété height pour gérer la hauteur des LI. Penser à utiliser du padding pour obtenir le rendu souhaité.

Merci pour cette info, j'en apprends tous les jours

Je vais tester tout ça