CSS ul li เมนูแนวนอน ข้อมูลแนวนอน ด้วย inline-block

สอนภาษา CSS ul li สร้างเมนูแนวนอน ปกติการใช้คำสั่ง ul li นั้นข้อมูลจะเรียงแบบแนวตั้ง กรณีถ้าต้องการให้ข้อมูลเรียงเป็นแนวนอน แนะนำให้ใช้คำสั่ง display: inline-block กับ ul li สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง CSS ul li เมนูแนวนอน ข้อมูลแนวนอน ด้วย inline-block

<style>
    ul li {
        list-style: none;
        display: inline-block;
    }
</style>

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

CSS ul li เมนูแนวนอน ข้อมูลแนวนอน ตัวอย่างแนะนำให้ใช้คำสั่ง display: inline-block กับแท็ก ul li ซึ่งจะทำให้แสดงข้อมูลจากแนวตั้งเป็นแนวนอนแทน