عرض مصدر CSS/list-style-position

<noinclude>{{DISPLAYTITLE:الخاصية <code>list-style-position</code>}}</noinclude>
الخاصية <code>list-style-position</code> في CSS تُحدِّد مكان إشارة عناصر القائمة. ومن المستحسن عادةً استخدام الخاصية المختصرة <code>[[CSS/list-style|list-style]]</code>.<syntaxhighlight lang="css">
/* كلمات مفتاحية */
list-style-position: inside;
list-style-position: outside;

/* القيم العامة */
list-style-position: inherit;
list-style-position: initial;
list-style-position: unset;
</syntaxhighlight>
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>outside</code>
|-
! scope="row" |تُطبَّق على
|عناصر القوائم.
|-
! scope="row" |قابلة للوراثة
|نعم
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.

|}
ملاحظة: هذه الخاصية ستُطبَّق على عناصر القوائم، أي العناصر التي تكون قيمة الخاصية <code>[[CSS/display|display]]</code> فيها تساوي <code>list-item</code>، وهذا يتضمن العنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code> افتراضيًا؛ لكن لاحظ أنَّ قيمة هذه الخاصية قابلة للوراثة، أي يمكن ضبطها على العنصر الأب (الذي يكون عادةً <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code> أو <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code>) لتطبيق تنسيق القوائم على جميع العناصر الموجودة داخله.

== أمثلة ==
مثال عن قائمتين غير مرتبتين غير مرتبة <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code> ضبطنا لها الخاصية <code>list-style-position</code> مع القيمتين <code>inside</code> و <code>outside</code>:<syntaxhighlight lang="html">
<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>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
.inside  { list-style-position: inside; }
.outside { list-style-position: outside; }
</syntaxhighlight>

== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|1.0
|1.0
|4.0
|3.5
|1.0
|}

== البنية العامة ==
تقبل الخاصية <code>list-style-position</code> إحدى القيمتين التاليتين.
=== القيمة <code>outside</code> ===
ستظهر الإشارة خارج صندوق المحتوى.

=== القيمة <code>inside</code> ===
ستظهر الإشارة داخل صندوق المحتوى.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
list-style-position: inside | outside;

</syntaxhighlight>
== مصادر ومواصفات ==
* مسودة [https://drafts.csswg.org/css-lists-3/#list-style-position-property CSS Lists and Counters Module Level 3].
* مواصفة ‎[http://www.w3.org/TR/CSS2/generate.html#propdef-list-style-position CSS Level 2 (Revision 1)‎]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS List|{{SUBPAGENAME}}]]