إزالة المسافة البادئة غير المرتبة في القائمة باستخدام CSS

عندما يلتف النص في قائمة غير مرتبة، قد تظهر مسافات بادئة غير مرغوب فيها. لمعالجة هذه المشكلة، جرب الخطوات التالية:

1. إزالة المسافة البادئة

حذف الحشو الافتراضي والمسافة البادئة لنمط القائمة:

ul {
    padding: 0;
    list-style-type: none;  
}

2. إنقاص ارتفاع الخط

إذا لزم الأمر، قم بتقليل ارتفاع الخط عن طريق تعيينه مساويًا لحجم الخط، أو أقل قليلاً:

ul li {
    line-height: 1em;
}

3. تعطيل Float

إزالة أي خصائص عائمة مطبقة على عناصر القائمة، مع التأكد من عرضها كتلة مضمنة بدلاً من ذلك:

ul li {
    float: none;
    display: inline-block;
}

4. ضبط حجم الخط

كخطوة أخيرة، اضبط حجم الخط حسب المظهر المطلوب.

مثال

ضع في اعتبارك الكود التالي:

#info {
    ...
}

#info ul {
    padding: 0;
    list-style-type: none;
}

#info ul li {
    float: none;
    display: inline-block;
    line-height: 1em;
}
يجب أن يؤدي هذا المزيج من التقنيات إلى إزالة المسافة البادئة من الخطوط الملتفة في القوائم غير المرتبة، مما يضمن مظهرًا نظيفًا واحترافيًا.