Comment déplacer un lien spécifique vers la droite de l'en-tête ?

Dev
,
1

Super TC, une petite question concernant le déplacement de la section .links vers la droite avec CSS. J’ai essayé de déplacer un seul lien de .nav .nav-pills vers la droite mais je n’ai pas réussi. Je peux déplacer tout le .contents en utilisant justify-content: right mais cela ne fonctionne pas pour la section .links, et je ne parviens pas à comprendre l’interaction entre le Flexbox et les parties non-Flexbox de l’en-tête.

Je n’ai rien dans la section Icônes, mais j’ai essayé de configurer une icône pour apprendre pourquoi elles sont sur la droite, cependant cela m’échappe toujours.

Quelqu’un aurait un simple extrait CSS qui déplacerait les Liens vers la droite ?

1 « J'aime »
2

Bonjour Marcus,
Si j’ai bien compris, ce SCSS devrait faire ce que vous voulez :

.b-header nav.links {
    .nav-pills,
    & {
        display: flex;
        flex: 1;
        li:last-child {
            margin-left: auto;
        }
    }
}

image
image1362×126 9.61 KB

3 « J'aime »
3

Fonctionne parfaitement merci @Canapin !
J’avais essayé padding-left: auto sur l’élément requis, mais pas margin-left: auto ! Mon CSS-fu n’est pas fort.

2 « J'aime »
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.