در 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 روی لیستی از آیتمها را نمایش میدهد. در این مثال، محدوده جعبه محتوای هر آیتم با رنگ زمینه متفاوت مشخص شده است.
