Discussion :

[StreetFighter]

Bonjour,

Alors voilà j'ai un petit problème. Je veux placé un menu en haut à droite de mon site. Sur le menu il y a donc des "boutons" et un champs de recherche. Le problème est que je n'arrive pas à placer la barre de recherche à droite des boutons. J'ai tenté le inline-block mais rien à faire.

Voilà ce que je veux obtenir:


Mais impossible ma barre de recherche avec mon bouton "OK" viennent se placer en dessous les 2 "boutons", sur une deuxième ligne.

Code HTML:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<nav class="hautdroite">
	<div>
	       <ul class="menu-hautdroite">
		    <li><a href="#">Menu1</a></li>
                    <li><a href="#">Menu2</a></li>
               </ul>
	</div>			
	<form role="search" method="get" id="recherche" class="recherche" action="">
		<div>
			<label class="lire" for="b">Recherche pour :</label>
			<input type="text" value="" name="b" id="b" />
			<input type="submit" id="bouton" value="OK" />
		</div>
	</form>		
</nav>

Code CSS:

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
33
34
35
36
37
38
39
40
.hautdroite{
        background-color: grey;
	position: absolute;
	top: 0px;
	right: 0px;
}
 
ul.menu-hautdroite,
div.menu-hautdroite > ul {
	margin: 0;
	padding: 0 10px 0 0;
}
 
.menu-hautdroite li {
	display: inline-block;
	position: relative;
}
 
.menu-hautdroite li a {
	color: red;
	display: block;
	font-size: 15px;
	line-height: 1;
	padding: 15px 20px;
	text-decoration: none;
}
 
.menu-hautdroite li:hover > a,
.menu-hautdroite li a:hover,
.menu-hautdroite li:focus > a,
.menu-hautdroite li a:focus {
	background-color: blue;
	color: #fff;
}
 
 
.recherche {
    position: relative;
	display: inline-block;
}

Ne faites pas attention aux couleurs.
Merci d'avance.

[NoSmoking]

Bonjour,
tu as au moins 2 solutions :
- mettre en float:left la DIV qui contient ton menu.
- supprimer cette DIV et mettre ta UL en display:inline par exemple.