ทุก HTML element มีค่า display เริ่มต้น (default) ตัวอย่างเช่น <div> = block, <span> = inline, <li> = list-item เราสามารถเปลี่ยนค่าเริ่มต้นนี้ได้เพื่อจัด layout ตามต้องการ
ตัวอย่าง: ทำให้ <li> แสดงแนวนอน (Horizontal Menu)
<!DOCTYPE html>
<html>
<head>
<style>
p { background-color: orange; color: white; }
li { display: inline; } /* เปลี่ยนจาก list-item (block-like) เป็น inline */
</style>
</head>
<body>
<h2>Tutorials List</h2>
<p>Following are the list of resources:</p>
<ul>
<li><a href="https://www.tutorialspoint.com/machine_learning/index.htm" target="_blank">Machine Learning</a></li>
<li><a href="https://www.tutorialspoint.com/python_data_science/index.htm" target="_blank">Python Data Science</a></li>
<li><a href="https://www.tutorialspoint.com/python/index.htm" target="_blank">Python</a></li>
<li><a href="https://www.tutorialspoint.com/csharp/index.htm">C#</a></li>
<li><a href="https://www.tutorialspoint.com/artificial_intelligence/index.htm" target="_blank">Artificial Intelligence</a></li>
</ul>
</body>
</html>
คำอธิบาย: <li> ปกติเป็น block (ขึ้นบรรทัดใหม่) แต่ display: inline ทำให้ต่อกันในบรรทัดเดียว กลายเป็นเมนูแนวนอน
กรณีใช้งานทั่วไป
- Horizontal navigation:
li { display: inline; }หรือinline-block(เพื่อ padding/margin) - Button-like links:
a { display: inline-block; padding: 10px 20px; } - Hide element:
display: none(แตกต่างจากvisibility: hiddenที่ยังครอบพื้นที่) - Reset default:
display: revert(คืนค่า browser default)
ข้อสังเกต: การเปลี่ยน display อาจส่งผลต่อ accessibility (screen readers) และ semantic meaning ควรใช้ semantic HTML ให้ถูกต้องก่อน (เช่น <nav><ul><li><a> แทนการ hack display)
