วิธีการสร้าง: กลุ่มรายการ

เรียนรู้วิธีการใช้ CSS ในการแปลงรายการเบื้องต้นเป็น 'กลุ่มรายการ'。

  • Adele
  • Agnes
  • Billy
  • Bob
  • Calvin
  • Christina
  • Cindy

亲自试一试

วิธีการสร้างกลุ่มรายการ

ขั้นที่ 1 - กำหนด HTML:

<ul>
  <li>Adele</li>
  <li>Agnes</li>
  <li>Billy</li>
  <li>Bob</li>
  <li>Calvin</li>
  <li>Christina</li>
  <li>Cindy</li>
</ul>

ขั้นที่ 2 - กำหนด CSS:

ul {
  list-style-type: none; /* ลบลำดับรายการ */
  padding: 0; /* ลบระยะห่างด้านใน */
  margin: 0; /* ลบระยะห่างด้านนอก */
}
ul li {
  border: 1px solid #ddd; /* กำหนดเส้นขอบเล็กแบบแข็งต่อแต่ละรายการในรายการ */
  margin-top: -1px; /* ป้องกันการเรียงของกรอบทั้งสองด้าน */
  background-color: #f6f6f6; /* กำหนดสีพื้นหลังที่เป็นสีเงา */
  padding: 12px; /* กำหนดระยะห่างด้านใน */
}

亲自试一试

相关页面

教程:CSS 列表