ทำอย่างไรให้ <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
ให้แสดงผลเป็น 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
ไม่มีความคิดเห็น:
แสดงความคิดเห็น