ویژگی 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.
20
سلام.
من یه ul دارم. که داخلش چندتا li دارم. که داخل هر li یه تگِ a دارم. و داخل a هم یه span دارم که متنه.
حالا میخوام list-styleهام که عکس هستند بیان داخل li. ولی مشکل اینه که به تگِ a استایل display:block دادم چون میخواستم کل li لینک بشه، نه فقط متنش.حالا به خاطر همین وقتی میخام “لیست استایل” رو بیارم داخل عنصر، در یه خط جداگانه قرار میگیره.
آیا راهی هست که این مشکل حل بشه؟
متشکر
البته قبلا، تگ a رو آوردم بیرون li که کل li رو شامل بشه. در نتیجه چنین مشکلی نداشتم. ولی یکی از دوستان گفت نباید هیچ چیزی رو بیاری بیرون li و استاندارد نیست. آیا همینطوره؟ و کار من غلط بود یا مشکلی ایجاد میکرد؟
a رو برگدونید داخل li و a ویژگی display با مقدار inline-block بدید شاید حل بشه مشکلتون.