تسمية <ul> في HTML

  • الصفحة السابقة <u>
  • الصفحة التالية <var>

التعريف والاستخدام

<ul> العلامة لتعريف قائمة غير مرتبة (مزودة بمسافات)

استخدم <ul> العلامة و <li> العلامة لإنشاء قائمة غير مرتبة.

نصيحة:استخدم CSS لـتعيين نمط القائمة.

نصيحة:للقوائم المرتبة، استخدم <ol> العلامة.

انظر أيضًا:

دليل HTML:قائمة HTML

دليل مرجع HTML DOM:مفهوم Ul

دليل CSS:تعيين نمط القائمة

مثال

مثال 1

قائمة HTML غير مرتبة:

<ul>
  <li>قهوة</li>
  <li>شاي</li>
  <li>الزبدة</li>
</ul>

جربها بنفسك

مثال 2

تعيين أنواع قوائم مختلفة (استخدام CSS):

<ul style="list-style-type:circle">
  <li>قهوة</li>
  <li>شاي</li>
  <li>الزبدة</li>
</ul>
<ul style="list-style-type:disc">
  <li>قهوة</li>
  <li>شاي</li>
  <li>الزبدة</li>
</ul>
<ul style="list-style-type:square">
  <li>قهوة</li>
  <li>شاي</li>
  <li>الزبدة</li>
</ul>

جربها بنفسك

مثال 3

توسيع وتقليل طول السطر في القائمة (استخدام CSS):

<ul style="line-height:180%">
  <li>قهوة</li>
  <li>شاي</li>
  <li>الزبدة</li>
</ul>
<ul style="line-height:80%">
  <li>قهوة</li>
  <li>شاي</li>
  <li>الزبدة</li>
</ul>

جربها بنفسك

مثال 4

إنشاء قائمة أخرى داخل القائمة (قائمة فرعية):

<ul>
  <li>قهوة</li>
  <li>شاي
    <ul>
      <li>بور تشا
      <li>شاي الأخضر</li>
    </ul>
  </li>
  <li>الزبدة</li>
</ul>

جربها بنفسك

مثال 5

إنشاء قائمة فرعية معقدة:

<ul>
  <li>قهوة</li>
  <li>شاي
    <ul>
      <li>بور تشا
      <li>شاي أخضر
        <ul>
          <li>البرغوث</li>
          <li>الغاروش</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>الزبدة</li>
</ul>

جربها بنفسك

خصائص العالمية

<ul> الدعم عن طريق خصائص العالمية في HTML.

خصائص الحدث

<ul> الدعم عن طريق خصائص الحدث في HTML.

إعدادات CSS الافتراضية

معظم المتصفحات ستعمل باستخدام القيم الافتراضية التالية <ul> العنصر:

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

جربها بنفسك

دعم المتصفحات

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم
  • الصفحة السابقة <u>
  • الصفحة التالية <var>