برچسب <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>چای</li>
    <ul>
      <li>پای لو</li>
      <li>چای سبز</li>
    </ul>
  </li>
  <li>میلک</li>
</ul>

آزمایش کنید

مثال 5

ایجاد لیست‌های پیچیده‌تر:

<ul>
  <li>قهوه</li>
  <li>چای</li>
    <ul>
      <li>پای لو</li>
      <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>