كيفية توسيط قائمة أفقية في Div في CSS

مؤلف: Laura McKinney
تاريخ الخلق: 2 أبريل 2021
تاريخ التحديث: 13 قد 2024
Anonim
Pure HTML and CSS drop down navigation bar
فيديو: Pure HTML and CSS drop down navigation bar

المحتوى

عند إنشاء صفحة ويب ، قد يكون من المفيد استخدام CSS لتوسيط قائمة أفقية ، مثل القائمة القابلة للنقر. يمكنك استخدام CSS ، وهي لغة ورقة أنماط ، بجانب HTML للتحكم في مظهر صفحتك. غالبًا ما يتم عرض أنماط CSS بشكل غير متوقع في متصفحات الويب المختلفة ، لذلك من المهم اختبار صفحتك تمامًا قبل نشرها. القائمة غير المرتبة (ul) عبارة عن عنصر على مستوى الكتلة ، بحيث يمكنك استخدام خاصية العرض لإنشاء تأثير مركزي.


الاتجاهات

يمكنك استخدام CSS و HTML للتحكم في مظهر صفحة الويب الخاصة بك (Comstock / Stockbyte / Getty Images)

  1. افتح ملف HTML الخاص بك في محرر نصوص ، مثل Windows Notepad.

  2. أضف أنماط 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).

  3. قم بإنشاء قائمة أفقية في قسم ">" من ملف HTML بإضافة الكود التالي:

    • البند الأول
    • البند الثاني في div

    تحدد علامة "ul" قائمة غير مرتبة. تتطابق علامة "li" مع عنصر في القائمة. تستخدم عناصر القائمة أنماط CSS التي تطابق تلك المحددة أعلاه.


  4. احفظ ملف HTML وقم بتحميله على خادم الويب لعرض القائمة الأفقية المتمركزة.