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

Logical Inset Dropdown Alignment محاذاة القائمة المنطقية للغتين

صمم قوائم منسدلة احترافية بلغة CSS الخالصة عبر القوائم الدلالية المتداخلة والتموضع المنطقي ثنائي اللغة والانتقالات السلسة وجسر الفأرة الخفي ودعم التنقل الكامل بلوحة المفاتيح.
1 صفوف تعليمية
لغة CSS
0 مشاهدة

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

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

تثبيت الإزاحة المادية left: 0 يحاذي القائمة بشكل سليم في الواجهات الإنجليزية، لكنه يخل بالمحاذاة في الواجهات العربية ذات الاتجاه من اليمين إلى اليسار وقد يدفع القوائم العريضة خارج الحافة اليمنى للشاشة.

أما الخاصية المنطقية inset-inline-start: 0 فتحل المشكلة للغتين بسطر واحد؛ إذ تحاذي القائمة مع الحافة اليسرى لعنصرها الأب بالإنجليزية ومع الحافة اليمنى بالعربية تلقائياً. وللقوائم الواقعة في أقصى نهاية الشريط كقائمة الحساب الشخصي نستخدم inset-inline-end: 0 لتمتد اللوحة نحو داخل الشاشة دون خروج.