كيف تنقل عنصر رابط معين إلى يمين الرأس؟

مطور
,
1

رائع، سؤال سريع حول نقل قسم .links إلى اليمين باستخدام CSS. لقد حاولت نقل رابط واحد من .nav .nav-pills إلى اليمين ولكن لم أتمكن من تحقيق ذلك. يمكنني نقل قسم .contents بالكامل باستخدام justify-content: right ولكن هذا لا يعمل لقسم .links، ولا يمكنني فهم التفاعل بين Flexbox والأجزاء غير Flexbox من الرأس.

ليس لدي أي شيء في قسم الأيقونات، لكنني حاولت تكوين أيقونة لمعرفة سبب وجودها على اليمين، ومع ذلك لا يزال الأمر يربكني.

هل لدى أي شخص مقتطف CSS بسيط لنقل الروابط إلى اليمين؟

إعجاب واحد (1)
2

مرحباً ماركوس،
إذا فهمت جيداً، فإن هذا الـ SCSS يجب أن يفعل ما تريده:

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

image
image1362×126 9.61 KB

3 إعجابات
3

يعمل بشكل مثالي شكراً @Canapin!
لقد جربت padding-left: auto على العنصر المطلوب، ولكن ليس margin-left: auto! براعتي في CSS ليست قوية.

إعجابَين (2)
4

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