انتقل إلى محتوى الدرس

Opposite Edge Navbar Alignment توزيع الروابط على طرفي الشريط

أنشئ أشرطة تنقل أفقية علوية احترافية بلغة CSS باستخدام صف العناصر عبر inline-block والتعويم المحتوى بـ flow-root، مع رسم الفواصل العمودية وتوزيع طرفي الشريط وتثبيته أعلى الشاشة أثناء التمرير.
3 صفوف تعليمية
لغة CSS
5,323 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تحتاج كثير من الواجهات الحقيقية إلى تجميع روابط الأقسام الأساسية في بداية الشريط العلوي مع دفع رابط ثانوي مهم — مثل تسجيل الدخول أو الدعم الفني — إلى أقصى الطرف المقابل من الشريط.

يتحقق هذا التوزيع الطرفي مع التعويم بمرونة عبر صنف مسطح واحد؛ إذ تبقى عناصر .nav-item الأساسية معوّمة نحو البداية، بينما يُمنح العنصر الأخير الصنف .nav-item-end مع تعويم معاكس float: right في الإنجليزية أو float: left في العربية. جرّب الحالات الثلاث في المختبر التفاعلي التالي للمقارنة العملية:

الصف 2 معاينة حية
الصف 3 ملاحظة هامة