ทำให้ DIV เรียงกันแนวนอน ไม่ขึ้นบรรทัดใหม่
ทำอย่างไรให้ <div>1</div> <div>2</div> <div>3</div>
ให้แสดงผลเป็น 1 2 3
ปกติจะแสดงผลเป็น
1
2
3
div หรือ p จะมีลักษณะเป็น block element มีค่าของ display:block รวมอยู่ ทำให้ขึ้นบรรทัดใหม่เสมอ
ถ้าต้องการให้เรียงกันโดย ไม่ขึ้นบรรทัดใหม่ เราจะต้องใช้ inline element เช่น span ซึ่งเมื่อครอบแล้วจะไม่ขึ้นบรรทัดใหม่ จะมีค่าของ display:inline รวมอยู่
ถ้าต้องการให้ div เรียงกันไม่ขึ้นบรรทัดใหม่ ต้องกำหนด display:inline ให้มัน
ถ้าต้องการให้ span ไม่เรียงต่อกัน ขึ้นบรรทัดใหม่ เก็ใส่ display:block ให้มัน
ถ้าใช้ span ครอบ แทน div มันก็จะเรียงกันแล้ว หรือ ใช้ ul li แล้วสั่ง li ให้ display:inline
tag หลักๆที่เราจะใช้สำหรับกำหนด layout แทน table ก็คือ <div></div>
<span></span> ก็ให้ผลอย่างเดียวกัน แต่ div จะมีคุณสมบัติในการขึ้นบรรทัดใหม่ tag ที่สามารถขึ้นบรรทัดใหม่ก็ เช่น <h1>,<p>,<li>,<div> แต่ span นั้น จะไม่ขึ้นบรรทัดใหม่ จึงมักจะใช้ ครอบส่วนที่เป็น text