لیست مرتب نشده HTML

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

 

لیست نا مرتب در HTML

لیست نامرتب با برچسب <ul> شروع می شود. هر مورد از لیست با برچسب <li> شروع می شود.

موارد لیست به صورت پیش فرض با گلوله (دایره های سیاه کوچک) مشخص می شوند:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
امتحان کنید

 

لیست HTML غیر مرتب - نشانگر مورد را انتخاب کنید

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

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

 

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
امتحان کنید

 

<ul style="list-style-type:circle;">
  <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>
امتحان کنید

 

<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>
امتحان کنید

 

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

 

لیست افقی با CSS

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

یکی از راه های محبوب این است که یک لیست را به صورت افقی تنظیم کنید، و یک منوی ناوبری ایجاد کنید:

<!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>
امتحان کنید