Partage

Envoyer 1 seul élément à droite (flex ?)

Sujet résolu
11 mars 2018 à 18:18:11

Bonjour/Bonsoir,

Pour une menu navigation, je cherche à mettre une icône de recherche à l'extrême droite (comme on pourrait le faire avec flex-end)

Le problème est que dans ce cas, l'ensemble (dont le logo et les menus qui doivent rester à gauche) se tapent aussi en flex-end.

Bref, c'est sûrement con, et j'utilise peut-être pas la bonne méthode (grid, float, position ?) ou j'oublie bêtement un truc.

(Veuillez excuser le novice que je suis :ange: )

Donc: dans le lien codepen, c'est la div "recherche" qui doit rester à hauteur des menus et se taper toute seule à droite ^^

D'ores et déjà merci pour votre aide !

RDV sur codepen : https://codepen.io/Moquette/pen/QmbpzM

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
Financée
à 100%
11 mars 2018 à 19:14:06

Salut,

En mettant margin-left: auto; sur l'élément.

Par contre, ton code d'exemple sur codepen comporte une erreur, la div flex n'est pas fermée. Et pense à indenter correctement ton code, c'est un prérequis pour éviter ce genre d'erreurs… Si tu fais ça sur quelques lignes, je n'ose pas imaginer à l'échelle d'un site !

<header class="header">   
  <div class="logo">logo</div>
  
  <nav class="menu"> 
    <a href="#">boutique</a>
    <a href="#">blog</a>
    <a href="#">team</a>
    <a href="#">vidéos</a>
    <a href="#">notre histoire</a>
    <a href="#">sale</a>
  </nav>
  
  <div class="recherche">
    Recherche
  </div>
</header>
.header {
  display: flex;
  background-color: tomato;
  padding: 10px 5px;
}

.menu {
  padding: 0 5px 0 20px;
}

.menu a {
  display: inline-block;
}

.recherche{
  font-weight: 900;
  margin-left: auto;
}




-
Edité par rhooManu 11 mars 2018 à 19:14:41

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
12 mars 2018 à 10:47:35

Un grand merci pour la solution et tes conseils !

Envoyer 1 seul élément à droite (flex ?)

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown