Comment aligner ma boîte de recherche à l'extrême droite

Bonjour à tous et bonne fin de semaine.Comment aligner ma boîte de recherche à l'extrême droite

J'essaie d'aligner sur la même ligne horizontale, les boutons de liens sur le côté gauche et la boîte de recherche sur le côté droit.

Le champ de recherche doit aller jusqu'au bout du côté droit.

Merci beaucoup d'avance pour votre aide.

C'est ce que j'ai jusqu'à présent:

Voici le menu:

<div class="navmenu"> <ul id=menu> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><form action='q.php' method='GET'> <input type='text' size='25' name='search'> <input type='submit' name='submit' value='Search' > </form></li> </ul> </div>

Ceci est le css:

.navmenu { background-color: #FAFAFA;} 
.navmenu ul {margin: 0; padding: 0; 
    list-style-type: none; list-style-image: none; } 
.navmenu li {display: inline; } 
.navmenu ul li a {text-decoration:none; margin: 4px; 
    padding: 5px 20px 5px 20px; color: #FFFFFF; 
    background: #5CB85C;} 
.navmenu ul li a:hover {color: #FFFFFF; 
    background: #449D44; }

Source

2016-11-25 Fabio Viola

Si vous pouvez utiliser FlexBox, qui peut être assez facile.

jsFiddle

.navmenu ul { 
    display: flex; /* defines flexbox */ 
} 
.navmenu li:last-child { 
    margin-left: auto; /* pushes the last <li> to the far right */ 
}

Source

2016-11-25 17:05:03 Stickers

Quand il s'agit d'aligner des éléments sur le X et/ou l'axe Y, '' 'écran: flex,' '' est très pratique. Vous pouvez trouver un très bon tutoriel ici: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Définir un conteneur avec display: flex; et arrangez les éléments ci-dessous comme vous le souhaitez en utilisant justify-content, align-items et align-content. – actc

.navmenu { background-color: #FAFAFA;} 
 
.navmenu ul {margin: 0; padding: 0; 
 
    list-style-type: none; list-style-image: none; } 
 
.navmenu li {display: inline; } 
 
.navmenu ul li a {text-decoration:none; margin: 4px; 
 
    padding: 5px 20px 5px 20px; color: #FFFFFF; 
 
    background: #5CB85C;} 
 
.navmenu ul li a:hover {color: #FFFFFF; 
 
    background: #449D44; } 
 
    .navmenu ul li form{ text-align:right;margin-top:-20px; }

<div class="navmenu"> <ul id=menu> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><form action='q.php' method='GET'> <input type='text' size='25' name='search'> <input type='submit' name='submit' value='Search' > </form></li> </ul> </div>

Source

2016-11-25 17:45:18 Mallikarjun

Comment aligner ma boîte de recherche à l'extrême droite

Répondre

Questions connexes