تگ های HTML – تگ ul

سلام

با معرفی تگ <ul> از سری تگ های HTML در خدمتتون هستیم.

• نمونه کد تگ <ul>

 <ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

پیش نمایش کد

• معرفی و کاربرد

تگ <ul> برای ایجاد یک لیست نامرتب استفاده میشود.

از تگ <ul> به همراه تگ <li> برای ایجاد لیست های نامرتب استفاده کنید.

نکته: برای استایل دادن به لیست هایی که با تگ <ul> میسازید، از Css استفاده کنید.

برای ایجاد لیست های مرتب شده از تگ <ol> استفاده کنید.

• پشتیبانی در مرورگرها

110

• تنظیمات پیشفرض 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;
}

در ادامه چند مثال دیگر از حالت های مختلف تگ ul را برایتان قرار میدهیم.

مثال 1:

 <ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

مثال 2:

 <ul style="line-height:180%">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="line-height:80%">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

مثال 3:

 <ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

مثال 4:

 <ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

معرفی تگ <ul> به پایان رسید.

موفق باشید.