إنشاء الشريط الأفقي عبر التعويم | شريط التنقل الأفقي في لغة CSS

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

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

عند الرغبة في رص تبويبات الشريط الأفقي بتلاصق تام دون أي فراغ بيني يفصل خلفياتها الملونة، نعتمد أسلوب تعويم عناصر القائمة مع احتواء الأب:

نطبق float: right على الصنف .nav-item في الواجهات العربية RTL، أو float: left في الواجهات الإنجليزية LTR، فتتراص الخانات جنباً إلى جنب بصفر فراغات فاصلة.
نضيف display: flow-root إلى القائمة الأب .nav-list حتى تحتوي أبناءها المعوّمين وتحافظ على كامل ارتفاع خلفيتها بدلاً من انهيار ارتفاعها إلى 0px.

الصف 2 كود برمجي

CSS

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flow-root;
  background-color: #1d172b;
}
.nav-item {
  float: left;
}

الصف 3 ملاحظة هامة