چگونه ایجاد شود: لیست‌های گروهی

آموزش نحوه استفاده از 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 {
  list-style-type: none; /* حذف نشانه‌های لیست */
  padding: 0; /* حذف فضای داخلی */
  margin: 0; /* حذف حاشیه‌های بیرونی */
}
ul li {
  border: 1px solid #ddd; /* افزودن حاشیه نازک برای هر آیتم لیست */
  margin-top: -1px; /* جلوگیری از حاشیه‌های دوطرفه */
  background-color: #f6f6f6; /* افزودن رنگ پس‌زمینه خاکستری */
  padding: 12px; /* افزودن فضای داخلی */
}

آزمایش کنید

صفحات مرتبط

آموزش‌ها:لیست CSS