المحتوى
عند إنشاء صفحة ويب ، قد يكون من المفيد استخدام CSS لتوسيط قائمة أفقية ، مثل القائمة القابلة للنقر. يمكنك استخدام CSS ، وهي لغة ورقة أنماط ، بجانب HTML للتحكم في مظهر صفحتك. غالبًا ما يتم عرض أنماط CSS بشكل غير متوقع في متصفحات الويب المختلفة ، لذلك من المهم اختبار صفحتك تمامًا قبل نشرها. القائمة غير المرتبة (ul) عبارة عن عنصر على مستوى الكتلة ، بحيث يمكنك استخدام خاصية العرض لإنشاء تأثير مركزي.
الاتجاهات
-
افتح ملف HTML الخاص بك في محرر نصوص ، مثل Windows Notepad.
-
أضف أنماط CSS المطلوبة إلى القائمة الأفقية في القسم "" من ملف HTML الخاص بك عن طريق إضافة الكود التالي:
اكتب = "text / css"> .myclass {text-align: center؛ } .myclass ul {width: 275px؛ الهامش: 0px auto} .myclass li {display: block؛ تعويم: اليسار. الارتفاع: 50 بكسل ؛ ارتفاع الخط: 50 بكسل ؛ الهامش: 5px ؛ العرض: 125 بكسل ؛ الحدود: 1px الصلبة السوداء. }يمثل عرض القائمة (ul) مجموع العرض وهوامش العناصر الأفقية (li).
-
قم بإنشاء قائمة أفقية في قسم ">" من ملف HTML بإضافة الكود التالي:
- البند الأول
- البند الثاني في div
تحدد علامة "ul" قائمة غير مرتبة. تتطابق علامة "li" مع عنصر في القائمة. تستخدم عناصر القائمة أنماط CSS التي تطابق تلك المحددة أعلاه.
-
احفظ ملف HTML وقم بتحميله على خادم الويب لعرض القائمة الأفقية المتمركزة.