لیست نامرتب

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

برچسب <ul> در HTML، لیستی مرتب (گلوله شکل) را تعریف می کند.

لیست نامرتب HTML

یک لیست نامرتب با تگ <ul> آغاز می شود. هر آیتم لیست با تگ <li> آغاز می شود.[۱]

آیتم‌های لیست بطور پیش فرض با bulletها (دایره‌های کوچک سیاه) نشانه‌گذاری می‌شوند:

مثال

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


مشاهدهٔ نتیجه


لیست نامرتب HTML - انتخاب نشانگر آیتم لیست

خصوصیت list-style-type در CSS برای تعریف استایل نشان‌گر آیتم لیست استفاده می‌شوند:

مقدار توصیف
disc نشانگر آیتم لیست را bullet تنظیم می‌کند (پیش فرض)
circle نشانگر آیتم لیست را دایره تبدیل می‌کند
square نشانگر آیتم لیست را مربع تبدیل می‌کند
none نشانگر آیتم‌های لیست را حذف می‌کند

مثال - Disc

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


مشاهدهٔ نتیجه


مثال - Circle

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


مشاهدهٔ نتیجه


مثال - Square

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


مشاهدهٔ نتیجه


مثال - None

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


مشاهدهٔ نتیجه


لیست های HTML تودرتو

لیست‌ها می‌توانند تودرتو باشند (لیستی در لیست دیگر):

مثال

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


مشاهدهٔ نتیجه

توجه: آیتم‌های لیست خود می‌توانند شامل لیست جدید، و عنصرهای دیگر HTML باشند مانند تصویر، لینک و غیره.

لیست افقی با CSS

لیست‌های HTML با روش‌های مختلفی توسط CSS استایل دهی می‌شوند.

یک روش معروف استایل دهی افقی به لیست برای ایجاد منوی راهبری (Navigation Menu) است:

مثال

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>


مشاهدهٔ نتیجه

نکته: می‌توانید در مورد CSS در آموزش CSS ما بیشتر مطالعه کنید.

خلاصه بخش

  • از عنصر <ul> در HTML برای تعریف لیست نامرتب استفاده کنید
  • از خصوصیت list-style-type در CSS برای تعریف نشانگر آیتم لیست استفاده کنید
  • از عنصر <li> در HTML برای تعریف آیتم لیست استفاده کنید
  • لیست‌ها می‌توانند داخل لیست‌های دیگر بصورت تودرتو باشند
  • آیتم‌های لیست می‌توانند شامل عنصرهای HTML دیگری باشند
  • از خصوصیت float:left در CSS یا display:inline برای نمایش یک لیست بصورت افقی استفاده می‌شود

تمرین های HTML


منابع آموزشی