วันศุกร์ที่ 20 กรกฎาคม พ.ศ. 2555

CSS : การทำให้ DIV เรียงกันแนวนอน ไม่ขึ้นบรรทัดใหม่

ทำอย่างไรให้ <div>go</div> <div>to</div>  <div>school</div>
ให้แสดงผลเป็น go to school

ถ้าหากเขียนแบบธรรมดาแล้วจะแสดงผลเป็น
go
to
school


ก่อนอื่นต้องเข้าใจก่อนนะครับว่า div หรือ p จะมีลักษณะเป็น block element คือ จะมีค่าของ display:block แฝงอยู่ ทำให้ขึ้นบรรทัดใหม่ตลอด  

ถ้าต้องการให้เรียงกันโดย ไม่ขึ้นบรรทัดใหม่ เราจะต้องใช้ inline element เช่น span อันนี้ครอบแล้วจะไม่ขึ้นบรรทัดใหม่ จะมีค่าของ display:inline แฝงอยู่

ถ้าต้องการให้ div เรียงกันไม่ขึ้นบรรทัดใหม่ คุณต้องกำหนด display:inline ให้มัน  ในทางกลับกัน ถ้าต้องการให้ span ไม่เรียงต่อกัน แต่ขึ้นบรรทัดใหม่ เราก็ใส่ display:block ให้มัน 

ในลักษณะที่ว่ามา ถ้าเป็นผมจะใช้ span ครอบ แทน div มันก็จะเรียงกันแล้ว หรือ ใช้ ul li แล้วสั่ง li ให้ display:inline ครับ


Credit : http://www.divland.com/forum/index.php?topic=1055.0

ไม่มีความคิดเห็น:

แสดงความคิดเห็น