28172 sujets

CSS et mise en forme, CSS3

[Résolu] Menu avec bouton à gauche et à droite de l'écran

Bonjour,
J'essaie de faire un menu qui tient sur une ligne avec un bouton à gauche de l'écran et un autre tout à droite de l'écran (mobile aussi!).

<div class="calselect">
  <span class="txtleft"><a href="?d=-1"><button class="btn--primary"><i class="icon-arrow--left"></i></button></a></span>
  <span class="txtcenter">milieu</span>
  <span class="txtright"><a href="?d=+1"><button class="btn--primary"><i class="icon-arrow--right"></i></button></a></span>
</div>

et mon CSS:

body {
	width: 100%;
	margin: 0;
	font-family: Arial;
}
.calselect {
	background-color: #aaa;
}

Malheureusement le bouton de droite ne s'affiche pas à droite de l'écran...
upload/1554232747-61429-capture.jpg
J'ai essayé plein d'autres balises sans succès.
Merci pour votre aide
Modifié par Chrigooo (02 Apr 2019 - 21:19)
Bonjour,

Ce que tu peux faire c'est rajouter une div dans ton html avec un id="right" pour le bouton droit :
<div id="right"><span class="txtright"><a href="?d=+1"><button class="btn--primary"><i class="icon-arrow--right"></i></button></a></span></div>


Puis dans ton css : 
#right{
	position: absolute;
	right: 0px;
}


Ca devrait fonctionner
Modifié par Franjuju (02 Apr 2019 - 23:23)
Modérateur
Salut,


.calselect {
  display: flex;
}
.txtcenter {
  flex: 1 1;
}

https://jsfiddle.net/s5d0erqn/

txtcenter prendra toute la place dispo au milieu et les boutons seront sur les côtés.
C'est pas ouf d'utiliser du absolute pour un petit truc comme ça Smiley smile

Bonne journée
Meilleure solution
Sujet clos
Aller à