28172 sujets

CSS et mise en forme, CSS3

Bonjour,
J'essaie de faire un div qui contient un label et un autre div à coté qui contient un select.
l'affichage est bon sur IE 11 et sur chrome, mais sur firefox il y a un décalage ! et je ne sais pas quelle est la cause de ce décalage.
J'ai essayé avec le vertical-align: top; mais sa donne pas le résultat attendu je vous montre le code HTML et CSS et ensuite les screen shots

<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="style.css"/>
		<title>test page</title>
	</head>
	<body>
		<div class="label"><label>Nombre</label></div><!--
		--><div class="liste"><select><option>5</option></select></div>
	</body>
</html>


.label{
	display: inline-block;
	margin: 10px 0 0 12px;
	height: 40px;
	border: 1px solid gray;
	line-height: 40px;
	width: 200px;
	text-align: center;
	font-size: 14px;
	color: #fc850f;
	font-weight: bold;
}
.liste{
	display: inline-block;
	height: 40px;
	border: 1px solid gray;
	width: 250px;
	background-color: white;
}
select{
	height:40px;
	width: 230px;
	border: none;
	margin-left: 10px;
	font-weight: bold;
	font-size: 14px;
	color: #014997;
	text-align: center;
}


http://www4.0zz0.com/2014/04/29/14/326940162.png
http://www4.0zz0.com/2014/04/29/14/559748947.png
http://www4.0zz0.com/2014/04/29/14/390451401.png

Je vous remercie.
salut,
le "vertical-align:top" s'applique aux deux mais c'est surtout le "margin: 10px 0 0 12px;" qui t'empêche d'avoir le résultat voulu.
Par contre question code, la pratique n'est pas correcte.