اذهب إلى المحتوى
  • 0

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

Nice Moon

السؤال

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

استخدام القوائم المتداخله <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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 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 و ترجمتها قائمة غير مرتبة ) بدل الأرقام يستخدم شكل دائري أو اي شكل أخر غير مرقم.

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 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 بكسل 

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...