تعريفه
نستخدم الوسم <li>
على هذا النحو <li>content</li>
لإضافة عنصر في القائمة التي يتم إنشاءها بواسطة الوسم <ol>
أو <ul>
أو <menu>
.
مكان الكلمة content
نمرر النص أو الرابط الذي نريد عرضه بداخل العنصر.
يمكنك وضع ما شئت بداخل العنصر و لكن في العادة يتم وضع إما نص عادي فيه أو رابط.
دعم المتصفحات
الجدول التالي يظهر المتصفحات التي تدعم الوسم <li>
.
Chrome |
Edge |
Firefox |
Opera |
Safari |
Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
1 |
12 |
1 |
≤12.1 |
3 |
1 |
18 |
4 |
≤12.1 |
1 |
1.0 |
خصائصه
نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.
الخاصية value
في حال كان الوسم <li>
موضوع بداخل وسم <ul>
يمكن إضافتها له لتغيير قيمة ترقيمه التلقائي.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome |
Edge |
Firefox |
Opera |
Safari |
Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
1 |
12 |
1 |
≤12.1 |
≤4 |
1 |
18 |
4 |
≤12.1 |
≤3 |
1.0 |
إستخدامه
في المثال التالي قمنا بعرض قائمة نوعها <ol>
.
المثال الأول
<ol>
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
</ol>
جرب الكود
في المثال التالي قمنا بعرض قائمة نوعها <ul>
.
المثال الثاني
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
</ul>
جرب الكود
في المثال التالي قمنا بعرض قائمة نوعها <menu>
.
ملاحظة: الوسم <menu>
يعمل فقط في متصفح Firefox.
المثال الثالث
<menu>
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
</menu>
جرب الكود
تصميمه الإفتراضي
بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.
li {
display:-item;
}
نصائح و ملاحظات
في حال أردت تغيير نوع الترقيم الذي يعتمده الوسم <li>
في حال كان موضوعاً بداخل وسم <ol>
أو في حال أردت تغيير نوع التنقيط الذي يعتمده الوسم <li>
في حال كان موضوعاً بداخل وسم <ul>
يجب فعل ذلك بواسطة الخاصية list-style-type
في CSS.
مثال
<ol>
<li>Apple</li>
<li style="list-style-type:upper-alpha">Orange</li>
<li>Mango</li>
</ol>
<ul>
<li>Apple</li>
<li style="list-style-type:circle">Orange</li>
<li>Mango</li>
</ul>
جرب الكود