วิธีสร้างการแสดง <ul> ในแถวแนวนอน

Question 1

ฉันจะทำให้รายการของฉันปรากฏในแนวนอนติดต่อกันโดยใช้ CSS ได้อย่างไร

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers {
    display: inline;
}

<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>

ขยายข้อมูลโค้ด

Question 2

โดยปกติรายการเป็นองค์ประกอบบล็อก เปลี่ยนให้เป็นองค์ประกอบแบบอินไลน์ผ่านdisplayคุณสมบัติ

ในรหัสที่คุณให้คุณต้องใช้ตัวเลือกบริบทเพื่อให้display: inlineคุณสมบัติใช้กับรายการแทนที่จะเป็นรายการเอง (การใช้display: inlineกับรายการโดยรวมจะไม่มีผล):

#ul_top_hypers li {
    display: inline;
}

นี่คือตัวอย่างการทำงาน:

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers li{
    display: inline;
}

<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>

ขยายข้อมูลโค้ด

Question 3

คุณยังสามารถตั้งค่าให้ลอยไปทางขวา

#ul_top_hypers li {
    float: right;
}

สิ่งนี้ทำให้พวกเขายังคงเป็นระดับบล็อก แต่จะปรากฏในบรรทัดเดียวกัน

Question 4

ตั้งค่าdisplayคุณสมบัติเป็นinlineสำหรับรายการที่คุณต้องการใช้กับ มีคำอธิบายที่ดีในการแสดงรายการบนเป็นรายการนอกเหนือ

Question 5

อย่างที่ @alex บอกคุณสามารถลอยได้ แต่ถ้าคุณต้องการให้มาร์กอัปเหมือนเดิมให้ลอยไปทางซ้าย!

#ul_top_hypers li {
    float: left;
}

Question 6

มันจะทำงานสำหรับคุณ:

#ul_top_hypers li {
    display: inline-block;
}

Question 7

เป็นคนอื่นได้กล่าวถึงคุณสามารถตั้งค่าliการdisplay:inline;หรือทางซ้ายหรือขวา นอกจากนี้คุณยังสามารถใช้กับไฟล์. ในตัวอย่างข้อมูลด้านล่างฉันได้เพิ่มเพื่อให้มีระยะห่างมากขึ้นfloatlidisplay:flex;uljustify-content:space-around

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ flexbox โปรดดูคู่มือฉบับสมบูรณ์นี้

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers {
    display: flex;
    justify-content:space-around;
    list-style-type:none;
}

<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>

ขยายข้อมูลโค้ด

Question 8

#ul_top_hypers li {
  display: flex;
}