انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #1 من درس: شريط التنقل الأفقي في لغة CSS

Horizontal Navbar Inline Block صف عناصر التنقل بقيمة inline-block

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

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

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

تتراص عناصر القائمة رأسياً بطبيعتها الافتراضية، غير أن القوائم العلوية للمواقع تعرض الأقسام الرئيسية متجاورة في سطر أفقي واحد. وتتمثل الطريقة الكلاسيكية الأبسط لبناء شريط التنقل الأفقي في إسناد display: inline-block لكل خانة .nav-item مع الإبقاء على display: block والحشوة المريحة على الرابط .nav-link:

  • تصطف خانات .nav-item جنباً إلى جنب في السطر نفسه دون كسر السطر بعد كل عنصر.
  • يمكنك توسيط مجموعة الروابط بالكامل في منتصف الشريط بسهولة تامة بمجرد إضافة text-align: center إلى الصنف .nav-list.

تأمل المخطط التوضيحي والمثال القابل للتشغيل أدناه لملاحظة تحول القائمة الدلالية إلى شريط علوي أنيق:

الصف 2 صورة توضيحية
مخطط يوضح صف العناصر عبر inline-block والتعويم المتلاصق مع flow-root وتثبيت الشريط الأفقي أعلى الشاشة
الصف 3 كود برمجي
CSS 
.nav-item {
  display: inline-block;
}
.nav-link {
  display: block;
  padding: 12px 18px;
  color: #ffffff;
  text-decoration: none;
}
جرّب بنفسك
الصف 4 ملاحظة هامة

جميع فقرات هذا الدرس (شريط التنقل الأفقي في لغة CSS)