• 0

مشكلة عدم ترتيب القوائم المتداخله ol و ul في html

السلام عليكم ارجو مساعدتي في هذه المشكله 

استخدام القوائم المتداخله <ol> و<ul>

مثال:

<h2>Microsoft office product</h2>

 <ol>

  <li>windows

  <ul>

  <li>windows 95</li>

  <li>windows 98</li>

  <li>windows xp</li>

  <li>windows 7</li>

  </ul>

  </li>

  <li>office</li>

  <li>visual basic</li>

   </ol>

</ul>

ناتج المثال: بالصوره

Capture.PNG.ea6dccf4539ec0662e120a79d8629dce.PNG

المفروض تكون القائمه مرتب ويش المشكله هنا ؟

اتمنى تساعدوني ومشكورين

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 1

و عليكم السلام..

يوجد لديك تاق إغلاق خاص بالعنصر ul زائد في نهاية الكود , كذلك الرجاء توضيح المشكلة أكثر ما الذي ترغب في عمله؟ لأن النتيجة في الصورة المرفقه متوقعه و صحيحة ما الخطأ؟

المتصفحات بصفة عامة يكون لديها تنسيقات إفتراضية لكل عنصر من عناصر لغة الhtml على سبيل المثال العنصر ul أو ol في متصفح قوقل كروم يكون لديه خاصية padding-inline-start بقيمة 40 بكسل لهذا تظهر لك المسافة الفارغة على يسار القائمة ربما لم تلاحظها في القائمة الأساسية و لكن تبدو واضحة في القائمة الفرعية و لحل هذه المشكلة بإمكانك جعل قيمة الخاصية padding-inline-start تساوي صفر بكسل , أولًا قم بعمل صنف تنسيقات ( css class ) جديد و لنسمه custom-ul و لنقم بإعطاءه خاصية padding-inline-start بقيمة صفر بكسل ثم نقوم بتعيين هذا الصنف للعنصر ul حتى يختفي الفراغ من على يساره :

5f02a597e6ee8_carbon(1).thumb.png.0bdca42f23d4d2505fe2241727bbd9bc.png

هكذا ستكون النتيجة :

5f02a67316068_Screenshotfrom2020-07-0606-19-08.png.ae03877d0b79de474ca6747b2d16509d.png

و لكن لو هذا ما ترغب فيه لماذا تستخدم قوائم متداخلة؟ أما بالنسبة لإختلاف الدوائر و الأرقام فإن العنصر ol يقوم بعمل قائمة مرتبة مرقمه ( إسم العنصر إختصار لكلمة ordered list و ترجمتها قائمة مرتبة) بينما العنصر ul قائمة غير مرتبة ( إسم العنصر إختصار لكلمة unordered list و ترجمتها قائمة غير مرتبة ) بدل الأرقام يستخدم شكل دائري أو اي شكل أخر غير مرقم.

ملاحظة : المقصود بالترتيب الترقيم.

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0
بتاريخ 1 ساعة قال Nezar Madi:

و عليكم السلام..

يوجد لديك تاق إغلاق خاص بالعنصر ul زائد في نهاية الكود , كذلك الرجاء توضيح المشكلة أكثر ما الذي ترغب في عمله؟ لأن النتيجة في الصورة المرفقه متوقعه و صحيحة ما الخطأ؟

المتصفحات بصفة عامة يكون لديها تنسيقات إفتراضية لكل عنصر من عناصر لغة الhtml على سبيل المثال العنصر ul أو ol في متصفح قوقل كروم يكون لديه خاصية padding-inline-start بقيمة 40 بكسل لهذا تظهر لك المسافة الفارغة على يسار القائمة ربما لم تلاحظها في القائمة الأساسية و لكن تبدو واضحة في القائمة الفرعية و لحل هذه المشكلة بإمكانك جعل قيمة الخاصية padding-inline-start تساوي صفر بكسل , أولًا قم بعمل صنف تنسيقات ( css class ) جديد و لنسمه custom-ul و لنقم بإعطاءه خاصية padding-inline-start بقيمة صفر بكسل ثم نقوم بتعيين هذا الصنف للعنصر ul حتى يختفي الفراغ من على يساره :

5f02a597e6ee8_carbon(1).thumb.png.0bdca42f23d4d2505fe2241727bbd9bc.png

هكذا ستكون النتيجة :

5f02a67316068_Screenshotfrom2020-07-0606-19-08.png.ae03877d0b79de474ca6747b2d16509d.png

و لكن لو هذا ما ترغب فيه لماذا تستخدم قوائم متداخلة؟ أما بالنسبة لإختلاف الدوائر و الأرقام فإن العنصر ol يقوم بعمل قائمة مرتبة مرقمه ( إسم العنصر إختصار لكلمة ordered list و ترجمتها قائمة مرتبة) بينما العنصر ul قائمة غير مرتبة ( إسم العنصر إختصار لكلمة unordered list و ترجمتها قائمة غير مرتبة ) بدل الأرقام يستخدم شكل دائري أو اي شكل أخر غير مرقم.

ملاحظة : المقصود بالترتيب الترقيم.

اي قصدي مرتبه مثل ماكتبتها  

اني توني ادرس ترجمه في البدايه  ودرس تطبيق قوائم متداخله استخدامو ol و ul 

وطلعت مرتبه عندهم مثل ماكتبتها 

لكن ماستخدمو في الدرس نضع 0 بكسل 

ومشكور على الرد ماقصرت 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن