26907 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai une liste à puces avec des textes dans les <li>, j'en ai alignés plusieurs à gauche avec un float: left et le dernier <li> à droite (float: right). Le premier <li> de ceux situés à gauche est écrit sur deux lignes et alors que celui de droite sur une ligne (c'est volontaire). Je souhaiterais juste savoir comment aligner tous ces <li> verticalement afin que ceux sur une ligne apparaissent entre les deux lignes par rapport à celui de gauche.
Image pour illustrer :
upload/1554744278-75148-sanstitre1.jpg

Je souhaiterais juste que ces textes soient alignés et apparaissent un petit peu plus bas.
Résultat souhaité :
upload/1554744487-75148-sanstitre1.jpg

Pouvez-vous m'aider svp ?
Merci Smiley biggrin
Modifié par Titouan79 (08 Apr 2019 - 19:33)
Re,

Utilises flexbox, c'est plus simple.

J'ai supprimé:


/*
nav > ul > li:not(:nth-child(8)) {
  float: left;
}

nav > ul > li:nth-child(8) {
  float: right;
} */


Et ajoute ceci au <ul>


display: flex;
justify-content: center;
align-items: center;


J'utiliserais plus de classes aussi, avec la méthode BEM.
Merci bien, mais ducoup, comment faire pour aligner le "mon profil" à droite et les autres éléments à gauche ?
Merci d'avance
Modifié par Titouan79 (08 Apr 2019 - 21:48)
Administrateur
Hello,

allan00958 a écrit :
Il faut rajouter au dernier &lt;li&gt;

Oui, ou une variante :

    margin-left: auto;
Administrateur
allan00958 a écrit :
@Raphael
Effectivement mais pourrais-tu expliquer ce qui se passe exactement ? Pourquoi "auto" ?

Les marges automatiques permettent de répartir l'espace restant.
Tu as certainement déjà dû utiliser
margin: auto
pour centrer horizontalement, c'est parce que les marges de droite et gauches se répartissent équitablement.

C'est aussi ce qui se passe si l'une seule des marges est automatique : https://codepen.io/raphaelgoetter/pen/NPEgrG?editors=110

EDIT : tiens, je viens de trouver une autre ressource : https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/
Modifié par Raphael (09 Apr 2019 - 08:16)
Re,

J'ai voulu recoder ton menu en mieux, mais je n'arrive pas à faire en sorte que les liens prennent toute la place du menu, verticalement, en flexbox. Si je trouve la réponse, je mettrai le fiddle à jour.

https://jsfiddle.net/qbh1y6ru/1/

Sinon, si Raphael peut intervenir, ce serait chouette Smiley smile
allan00958 a écrit :
Re,

J'ai voulu recoder ton menu en mieux, mais je n'arrive pas à faire en sorte que les liens prennent toute la place du menu, verticalement, en flexbox. Si je trouve la réponse, je mettrai le fiddle à jour.

https://jsfiddle.net/qbh1y6ru/1/

Sinon, si Raphael peut intervenir, ce serait chouette Smiley smile


C'est super sympa de ta part Smiley biggrin !
N'hésite pas à me tenir au courant si tu y arrives !
@gcyrillus

Merci pour la réponse. Je n'y avais pas pensé.

@Titouan79

J'ai donc mis à jour le fiddle: https://jsfiddle.net/9hjxyb5g/

Tu n'es pas obligé d'utiliser flexbox. Tu peux te contenter des blocks, surtout si tu débutes en CSS. Certains layouts sont plus faciles à créér avec Flexbox.

Je me distance du topic. Si besoin, tu peux m'envoyer un message privé.