รายการไม่เรียงลำดับ ul และ li

รายการไม่เรียงลำดับคืออะไร

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

องค์ประกอบ ul

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>
<!-- ul = unordered list (bullet points by default) -->
<!-- li = list item -->
<!-- Never put text directly inside ul without li -->

การจัดรูปแบบจุดนำหน้าด้วย CSS

ul {
  list-style-type: disc;       /* default: filled circle */
  /* circle, square, none */
}

/* Custom bullet with ::before */
ul li::before {
  content: '→ ';
  color: blue;
}

/* Remove all list styling: */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

การใช้ ul สำหรับการนำทาง

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

li บรรจุเนื้อหาใดก็ได้

<ul>
  <li>
    <strong>HTML</strong>
    <p>The structure of the web.</p>
  </li>
  <li>
    <strong>CSS</strong>
    <p>The presentation layer.</p>
  </li>
</ul>

รายการแบบแนวนอน

<ul class="inline-list">
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ul>

<!-- CSS: -->
<!--
.inline-list {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
}
-->

การใช้ ul เชิงความหมาย

ul เทียบกับ p สำหรับหลายรายการ

<!-- Bad: items that are actually a list -->
<p>- HTML</p>
<p>- CSS</p>
<p>- JavaScript</p>

<!-- Good: -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

เครื่องหมายรายการด้วย list-style-image

ul {
  list-style-image: url('/icons/check.svg');
}

/* More reliable: use background-image on li::before */
ul li {
  list-style: none;
  padding-left: 1.5rem;
  background: url('/icons/check.svg') no-repeat left center;
  background-size: 1rem;
}

ชวเลข list-style

ul {
  list-style: square inside;    /* type + position */
  list-style: none;             /* remove bullets */
}

/* list-style-position: inside vs outside */
ul {
  list-style-position: inside;  /* bullet inside padding box */
  /* outside = default, bullet outside text block */
}

การเข้าถึง

<ul style="list-style: none" role="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

ตรวจสอบอย่างรวดเร็ว

ทบทวน: รายการไม่เรียงลำดับ