ویژگی list-style-position در CSS

list-style-position Property

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

نحوه نوشتار

list-style-position: inside;
list-style-position: outside;

مقادیر

inside​

علائم (توپها) را داخل لیست آیتم قرار می دهد.

outside​

علائم (توپها) را خارج لیست آیتم قرار می دهد.

در مثال زیر نحوه عملکرد ای ویژگی را میبینیم:

html

<h3>outside</h3>
<ul class="list1">
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
   <li>item 4</li>
   <li>item 5</li>
</ul>
<h3>inside</h3>
<ul class="list2">
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
   <li>item 4</li>
   <li>item 5</li>
</ul>

css

h3 {
    text-align: center;
    color: red;
    margin: 0;
}
.list1 {
    list-style-position: outside; 
}
.list1 li {
    background-color: lightgreen; 
}
.list2 {
    list-style-position: inside; 
}
.list2 li {
    background-color: pink; 
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.