Làm thế nào để hiển thị <ul> trong một hàng ngang

106

Làm cách nào để làm cho các mục trong danh sách của tôi xuất hiện theo chiều ngang trong một hàng bằng cách sử dụng 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>

Mở rộng đoạn mã

html css html-lists

— Người trông trẻ
nguồn

câu hỏi hay. Tôi nghĩ trọng tâm ở đây thực sự là làm thế nào để thực hiện điều này để phù hợp với các tiêu chuẩn web mới nhất

— andy

132

Các mục danh sách thường là các phần tử khối. Biến chúng thành các phần tử nội tuyến thông qua thuộc displaytính.

Trong mã bạn đã cung cấp, bạn cần sử dụng bộ chọn ngữ cảnh để làm cho thuộc display: inlinetính áp dụng cho các mục danh sách, thay vì chính danh sách (áp dụng display: inlinecho danh sách tổng thể sẽ không có hiệu lực):

#ul_top_hypers li {
    display: inline;
}

Đây là ví dụ hoạt động:

#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>

Mở rộng đoạn mã

— hbw
nguồn

2

Tôi cũng đã đạt được hiệu ứng này bằng cách sử dụng float, do đó giữ bản chất khối của các mục danh sách.

— Joel

1

Đó là một cách tiếp cận thú vị, tôi phải nói - tuy nhiên, tôi nghĩ rằng điều đó sẽ tạo ra một số phức tạp không cần thiết với lợi nhuận và như vậy, vì bạn đang nâng hiệu quả các mục danh sách ra khỏi mô hình hộp.

— hbw

1

@htw: Bạn có thể đưa nó trở lại thiết bị bằng bất kỳ giải pháp clearfix nào.

— alex

2

Bạn luôn có thể sử dụng display: inline-block nếu bạn muốn giữ lại bản chất khối ... mặc dù nó không được hỗ trợ hoàn toàn ở giai đoạn này (tôi tin rằng Fx2 mới là thủ phạm chính).

— James B

17

Bạn cũng có thể đặt chúng trôi sang bên phải.

#ul_top_hypers li {
    float: right;
}

Điều này cho phép chúng vẫn ở mức khối, nhưng sẽ xuất hiện trên cùng một dòng.

— alex
nguồn

1

Việc thả nổi chúng sang phải sẽ có thêm một ảnh hưởng: nó sẽ hoán đổi thứ tự của chúng để từ trái sang phải chúng sẽ là người cuối cùng đến trước.

— Matthew James Taylor

À vâng, chúng sẽ cần phải được đảo ngược trong đánh dấu (rất nhiều để tách bố cục / đánh dấu!)

— alex

11

Đặt thuộc displaytính inlinecho danh sách bạn muốn áp dụng điều này. Có một lời giải thích tốt về việc hiển thị danh sách trên A List Apart .

— Paul Morie
nguồn

8

Như @alex đã nói, bạn có thể thả nó sang phải, nhưng nếu bạn muốn giữ nguyên đánh dấu, hãy thả nó sang trái!

#ul_top_hypers li {
    float: left;
}

— tjhorner
nguồn

7

Nó sẽ làm việc cho bạn:

#ul_top_hypers li {
    display: inline-block;
}

— vikram mohod
nguồn

3

Như những người khác đã đề cập, bạn có thể thiết lập liđể display:inline;, hoặc floatcác litrái hoặc phải. Ngoài ra, bạn cũng có thể sử dụng display:flex;trên ul. Trong đoạn mã dưới đây, tôi cũng đã thêm vào justify-content:space-aroundđể tạo thêm khoảng cách.

Để biết thêm thông tin về flexbox, hãy xem hướng dẫn đầy đủ này .

#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>

Mở rộng đoạn mã

— Matthew Johnson
nguồn

3

#ul_top_hypers li {
  display: flex;
}

— Kumar Saket
nguồn