الخاصية list-style-position
< CSS
الخاصية list-style-position
في CSS تُحدِّد مكان إشارة عناصر القائمة. ومن المستحسن عادةً استخدام الخاصية المختصرة list-style
.
بطاقة الخاصية
القيمة الابتدائية | outside
|
---|---|
تُطبَّق على | عناصر القوائم. |
قابلة للوراثة | نعم |
قابلة للتحريك | لا |
القيمة المحسوبة | كما حُدِّدَت. |
/* كلمات مفتاحية */
list-style-position: inside;
list-style-position: outside;
/* القيم العامة */
list-style-position: inherit;
list-style-position: initial;
list-style-position: unset;
ملاحظة: هذه الخاصية ستُطبَّق على عناصر القوائم، أي العناصر التي تكون قيمة الخاصية display
فيها تساوي list-item
، وهذا يتضمن العنصر <li>
افتراضيًا؛ لكن لاحظ أنَّ قيمة هذه الخاصية قابلة للوراثة، أي يمكن ضبطها على العنصر الأب (الذي يكون عادةً <ol>
أو <ul>
) لتطبيق تنسيق القوائم على جميع العناصر الموجودة داخله.
أمثلة
مثال عن قائمتين غير مرتبتين غير مرتبة <ul>
ضبطنا لها الخاصية list-style-position
مع القيمتين inside
و outside
:
<code>list-style-position: inside;</code>
<ul class="inside">
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<code>list-style-position: outside;</code>
<ul class="outside">
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
شيفرة CSS:
.inside { list-style-position: inside; }
.outside { list-style-position: outside; }
دعم المتصفحات
الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
الدعم الأساسي | 1.0 | 1.0 | 4.0 | 3.5 | 1.0 |
البنية العامة
تقبل الخاصية list-style-position
إحدى القيمتين التاليتين.
outside
ستظهر الإشارة خارج صندوق المحتوى.
inside
ستظهر الإشارة داخل صندوق المحتوى.
البنية الرسمية
list-style-position: inside | outside;
انظر أيضًا
- صفحة الخاصية
list-style
وهي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات الفرعيةlist-style-type
وlist-style-image
.
مصادر ومواصفات
- مسودة CSS Lists and Counters Module Level 3.
- مواصفة CSS Level 2 (Revision 1).