100% کامل شده تا

لیست نامرتب در اچ‌تی‌ام‌ال (HTML Unordered Lists)

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


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


لیست نامرتب HTML

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

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

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

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

</body>
</html>

Responsive demo.svg



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

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

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

مثال - Disc

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Disc Bullets</h2>

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

</body>
</html>

Responsive demo.svg


مثال - Circle

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Circle Bullets</h2>

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

</body>
</html>

Responsive demo.svg


مثال - Square

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Square Bullets</h2>

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

</body>
</html>

Responsive demo.svg


مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Unordered List without Bullets</h2>

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

</body>
</html>

Responsive demo.svg





لیست‌های HTML تودرتو (Nested HTML Lists)

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

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>

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

</body>
</html>

Responsive demo.svg


توجه: یک مورد لیست (<li>) می‌تواند شامل لیست جدید، و عنصرهای دیگر HTML باشند مانند تصویر، لینک و غیره.


لیست افقی با سی‌اس‌اس (Horizontal List with 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>

<h2>Navigation Menu</h2>
<p>In this example, we use CSS to style the list horizontally, to create a navigation menu:</p>

<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>

Responsive demo.svg


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


خلاصهٔ بخش (Chapter Summary)

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


برچسب‌های لیست در اچ‌تی‌ام‌ال (HTML List Tags)


منابع آموزشی




به‌روزرسانی شده: ۳۸ روز پیش