موقعیت نشانگر لیست در CSS – ویژگی list-style-position

در CSS از ویژگی list-style-position برای تعیین موقعیت نشانگر (marker) آیتم های لیست های مرتب و نامرتب استفاده می‌شود. به طور کلی نشانگرها می‌توانند داخل جعبه (inside) مربوط به محتوای آیتم ها باشند یا خارج از این جعبه (outside) قرار بگیرند.

بیشتر بخوانید: تعیین نشانگر لیست در CSS – ویژگی list-style-type

برای تعیین موقعیت نشانگر آیتم‌های لیست در CSS، کافیست مقدار ویژگی list-style-position را مشابه با مثال زیر مشخص کنید:

ul {
  list-style-position: inside;
}

با توجه به مثال فوق و مقدار inside برای ویژگی list-style-position، نشانگر تمام آیتم های موجود در لیست های نامرتب (المان های <li> که فرزند المان <ul> باشند) داخل جعبه محتوای آیتم قرار می‌گیرند. (در واقع المان های <li> این مقدار را از والد خود یعنی المان <ul> به ارث می‌برند).

مقادیر متداول برای ویژگی list-style-position

برای ویژگی list-style-position می‌توانید از مقادیر متداول زیر استفاده کنید:

• inside: این مقدار باعث می‌شود نشانگرها داخل جعبه مربوط به محتوای آیتم های لیست قرار بگیرند. به عبارت بهتر در این حالت، نشانگر جزئی از محتوای آیتم های لیست خواهد بود.
• outside: این مقدار، مقدار پیشفرض برای ویژگی list-style-position است و باعث می‌شود نشانگرها خارج از جعبه مربوط به محتوای آیتم های لیست قرار بگیرند.

تصویر زیر نمایی از نتیجه این دو مقدار برای ویژگی list-style-position روی لیستی از آیتم‌ها را نمایش می‌دهد.  در این مثال، محدوده جعبه محتوای هر آیتم با رنگ زمینه متفاوت مشخص شده است.

بازگشت به فهرست مجموعه آموزشی CSS