28172 sujets

CSS et mise en forme, CSS3

Alignement à gauche et à droite sur la même ligne

Bonjour,

Question simple, je veux avoir sur la même ligne une partie des liens alignée à gauche et une autre partie alignée à droite.

Je me demande quelle est façon la plus simple et robuste d'y parvenir.

Deux containers dans le même bloc avec l'un en float: left et l'autre en float: right

Deux containers avec l'un des deux en marge négative.

Ou autre technique à laquelle vous pensez ?
Selon ce que tu veux précisément, tu peux également jouer avec :
- deux conteneurs et text-align différents ;
- du display: inline-block ou table-cell et un jeu de largeur précis (en %, autant que faire se peut) ;
- du flexbox ;
- et même du positionnement absolu Smiley biggol

Je n’en ai pas d’autres en tête, tout dépend ensuite de ce que tu souhaites obtenir.
Bonjour,

Merci de ta réponse.

Je ne veux pas définir de largeur même en relatif, donc table-cell et inline-block semblent exclus.

Flexbox, très bien mais pas encore assez reconnu

"Ten" a écrit :

deux conteneurs et text-align différents

et des marges négatives pour les mettre sur la même ligne, non ?

Positionnemment absolu.
Tu as raison, c'est un peu l'équivalent des marges négatives.

A ce stade, il me semble que float est le plus sympa.

L'avantage est que sur petit écran les deux bllocs vont automatiquement s'aligner l'un en-dessus de l'autre sans se chevaucher.
Tu n'as pas cette sécurité avec les matges négatives ou postion: absolute.
Modifié par boteha_2 (29 Apr 2015 - 11:15)
Administrateur
boteha_2 a écrit :
Flexbox, très bien mais pas encore assez reconnu

Bonjour,

Cela dépend vraiment de ta cible.
"Statistiquement", c'est reconnu par 96% des utilisateurs en France par exemple.

(oui j'aime flexbox Smiley cligne )
Bonjourr,

Merci de vos réponses.

JENCAL a écrit :
tu cherche a faire cela ?
https://jsfiddle.net/nsykdh16/


Oui, mais avec les <li> en dsiplay! inilne.

Raphael a écrit :

Cela dépend vraiment de ta cible.
"Statistiquement", c'est reconnu par 96% des utilisateurs en France par exemple.


Super !
Ma ciible est large, le site de commece travaille avec les particuliers comme avec les entreprises.
Je me suis toujours interdit les flexbox jusqu'à présent
Du coup je ne connais pas trop, l'intérêt est voir si cela apporte quelque chose par rapport à float pour mon problème.
Modifié par boteha_2 (29 Apr 2015 - 18:23)
bonsoir,

je peut te ressortir une demo parmis d'autre : http://codepen.io/gc-nomade/pen/nrbDl
avec flex + justify-content:space-between; ou inline-block + text-align:justify; avec ou sans pseudo-element si l'on veut inclure IE7 et inférieur... au choix Smiley smile pas de foat !
Modifié par gc-nomade (29 Apr 2015 - 22:29)
Sujet clos
Aller à