list-style-position

ویژگی list-style-position تعیین می کند که نشانه گر آیتم های یک لیست بیرون از باکس اصلی عنصر یا داخل آن باشد.

این ویژگی همچنین می تواند بر روی عناصری که display آنها از نوع list-item است کنترل داشته باشد.

 

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

 


list-style-position: inside | outside | inherit

 

 

outside

outside مقدار اولیه و پیشفرض این ویژگی می باشد که باعث می شود تا علامت ها بیرون از باکس اصلی عنصر قرار بگیرند.

 

inside

با استفاده از این مقدار می توان نشانه گرها را در باکس اصلی آیتم های لیست جای داد.

 


ul {
  list-style-position: inside;
}

 

 

inherit

مقدار inherit باعث می شود تا مکان نشانه گر از لیست پدر به ارث گرفته شود.

 

مثال

دموی زیر را بررسی کنید:

 

See the Pen list-style-position by Mojtaba Seyedi (@seyedi) on CodePen.


 

سوالت رو توی پنل بحث و گفتگو مطرح کن.

4 دیدگاه برای “list-style-position

  1. سلام.
    من یه ul دارم. که داخلش چندتا li دارم. که داخل هر li یه تگِ a دارم. و داخل a هم یه span دارم که متنه.
    حالا میخوام list-styleهام که عکس هستند بیان داخل li. ولی مشکل اینه که به تگِ a استایل display:block دادم چون میخواستم کل li لینک بشه، نه فقط متنش.حالا به خاطر همین وقتی میخام “لیست استایل” رو بیارم داخل عنصر، در یه خط جداگانه قرار میگیره.
    آیا راهی هست که این مشکل حل بشه؟
    متشکر

    1. البته قبلا، تگ a رو آوردم بیرون li که کل li رو شامل بشه. در نتیجه چنین مشکلی نداشتم. ولی یکی از دوستان گفت نباید هیچ چیزی رو بیاری بیرون li و استاندارد نیست. آیا همینطوره؟ و کار من غلط بود یا مشکلی ایجاد میکرد؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *