• June 1, 2018

    ทำให้ 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



เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!






เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories