Tartiblanmagan ro'yxat

HTMLning <ul> elementi tartiblanmagan ro'yxat yaratadi

Tartiblanmagan ro'yhat

Tartiblanmagan ro'yxatlar <ul> tegi bilan boshlanadi. Ro'yhatning har bir elementi <li> tegi ichida bo'ladi.

Ro'yhatning har bir elementining oldida kichik qora aylana bo'ladi.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
LogoW3Schools online HTML editor

Tartiblanmagan ro'yxat - Ro'yxat oldidagi belgilarni o'zgartirish

Cssning list-style-type xususiyatidan foydalanib ro'yxat elementilarining oldidagi belgini o'zgartirishingiz mumkin. Uahbu xususiyatning qiymatlari quyidagilardir:

Qiymat
Tarif

disc

Ro'yxat elementlarining standart belgi

circle

Ro'yxat elementlariga aylana belgi qo'yadi

square

Ro'yxat elementlariga kvadrat belgi qo'yadi

none

Ro'yxat elementlaridan belgilarni olib tashlaydi

Disc ga misol
<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
LogoW3Schools online HTML editor
Circle ga misol
<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
LogoW3Schools online HTML editor
Square ga misol
<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
LogoW3Schools online HTML editor
None ga misol
<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
LogoW3Schools online HTML editor

HTMLdagi ichki ro'yxatlar

Ro'yxatlar ichma ich ham bo'lishi mumkin (ro'yxat ichida ro'yxat)

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
LogoW3Schools online HTML editor

Eslatma: Roʻyxat elementi (<li>) yangi roʻyxatni hamda rasmlar va havolalar kabi boshqa HTML elementlarini ham oʻz ichiga olishi mumkin.

CSS orqali gorizontal ro'yxat

HTML ro'yxatlarini CSS yordamida turli xil ko'rinishga keltirish mumkin.

Bulardan eng mashhuri - navbar yaratish uchun ro'yxatni gorizontal ko'rinishga keltirishdir

<!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>
LogoW3Schools online HTML editor

Maslahat: Bizning CSS o'quv qo'llanmamiz orqali CSS haqida ko'proq narsa o'rganishingiz mumkin.

Bo'lim xulosasi

  • Tartiblanmagan ro'yxat yaratish uchun <ul> elementidan foydalaning

  • Ro'yxat elementlarining belgisini o'zgartirish uchun CSSning list-style-type xususiyatidan foydalaning

  • Ro'yxat elementlarini yaratish uchun <li> elementidan foydalaning

  • Ro'yxatlar ichma ich bo'lishi ham mumkin

  • Ro'yxat elementlari boshqa HTML elementlarini ham o'z ichiga olishi mumkin

  • Ro'yxatni gorizontal qilish uchun CSSning float:left xususiyatidan foydalaning

Teg
Tarif

<ul>

Tartiblanmagan ro'yxat yaratadi

<ol>

Tartiblangan ro'yxat yaratadi

<li>

Ro'yxat elementlarini belgilaydi

<dl>

Tariflar ro'yxatini belgilaydi

<dt>

Ta'riflar ro'yxatidagi atamani belgilaydi

<dd>

Ta'riflar ro'yxatidagi atama tarifini belgilaydi

PreviousRo'yxatlarNextTartiblangan ro'yxat

Last updated