خاصية موضع علامة القائمة
آخر تحديث: 2026-09-13
list-style-position خاصية موضع علامة القائمة
تتحكم list-style-position فيما إذا كانت علامة القائمة داخل أو خارج كتلة محتوى عنصر القائمة. والافتراضي outside يضع العلامة خارج كتلة المحتوى بحيث تُحاذى السطر الأول من النص بدقة؛ أما inside فيسحب العلامة إلى داخل الكتلة فيلتف النص حولها. وتؤثر على تدفق القائمة ومسافتها البادئة.
| الفئة | |
|---|---|
| القيمة الأولية | outside |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
list-style-position: outside | inside;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
outside | inside | كلمة مفتاحية | موضع العلامة |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| list-style-position | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： outside هي الافتراضية وتُبقي الأسطر التالية محاذاة مع الأول؛ بينما تناسب inside النص القصير وتجعل العلامة والنص متقاربين بصريًا.
❓ الأسئلة الشائعة
Qكيف يؤثر outside و inside على تخطيط القائمة؟
Aoutside (الافتراضي): تكون العلامة خارج كتلة محتوى li، فيُحاذى كتلة النص ككل إلى اليسار، وتتصطف كل الأسطر، ويحتفظ العلامة بمسافته القياسية من النص. أما inside: فتكون العلامة داخل كتلة المحتوى، فيُدفع السطر الأول إلى الداخل وتتصطف الأسطر التالية تحت العلامة. وتناسب outside النص الطويل متعدد الأسطر؛ بينما تبدو inside أكثر تقاربًا.
Qلماذا يبدو النص أكثر انتظامًا مع outside؟
Aلأن العلامة في وضع outside لا تشغل عرضًا من كتلة المحتوى، فيكون كتلة النص مستطيلًا نظيفًا تتمحاذى حوافه اليسرى في كل سطر. أما في وضع inside فإن السطر الأول يُبعَد بواسطة العلامة، فلا يعود السطر الأول محاذيًا للأسطر التي تليه. وللقوائم متعددة الأسطر، احتفظ بالافتراضي outside لتتمحاذى كل الأسطر.
Qكيف أُحاذي علامات القائمة عموديًا مع النص؟
Aلا يضبط list-style-position محاذاة العلامة بدقة. والأسلوب المعتاد: list-style: none لإزالة العلامة، و li::before لإدراج content: "•" (أو أيقونة)، و flex مع align-items: center لمحاذاة العلامة مع النص عموديًا، ثم التحكم في المسافة بشكل موحد.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
