كيفية إنشاء: مجموعة قائمة

تعلم كيفية استخدام CSS لتحويل القائمة الأساسية إلى "مجموعة قائمة".

  • Adele
  • Agnes
  • Billy
  • Bob
  • Calvin
  • Christina
  • Cindy

جربها بنفسك

كيفية إنشاء مجموعة قائمة

الخطوة الأولى - إضافة HTML:

<ul>
  <li>Adele</li>
  <li>Agnes</li>
  <li>Billy</li>
  <li>Bob</li>
  <li>Calvin</li>
  <li>Christina</li>
  <li>Cindy</li>
</ul>

الخطوة الثانية - إضافة CSS:

ul {
  نوع القائمة: لا شيء; /* إزالة علامات القائمة */
  ملء: 0; /* إزالة الهوامش الداخلية */
  حجم: 0; /* إزالة الهوامش الخارجية */
}
ul li {
  الحواف: 1 بكسل متماسك #ddd; /* إضافة حواف نحيفة لكل عنصر القائمة */
  حجم الاعلى: -1 بكسل; /* منع الحواف الثنائية */
  لون الخلفية: #f6f6f6; /* إضافة لون خلفية رمادي */
  ملء: 12 بكسل; /* إضافة بعض الهوامش الداخلية */
}

جربها بنفسك

صفحات مرتبطة

دليل:قائمة CSS