Як зробити <ul> дисплей у горизонтальному ряду

106

Як я можу зробити так, щоб елементи списку відображалися горизонтально підряд за допомогою 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>

Розгорніть фрагмент

html css html-lists

— Бабікер
джерело

Гарне питання. Я думаю, що фокус тут справді полягає в тому, як це зробити відповідно до останніх веб-стандартів

— Енді

132

Елементи списку, як правило, блокові елементи. Перетворіть їх у вбудовані елементи через 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>

Розгорніть фрагмент

— hbw
джерело

2

Я також досяг цього ефекту, використовуючи float, тим самим зберігаючи блоковий характер елементів списку.

— Джоель

1

Я мушу сказати, що це цікавий підхід, однак, я думаю, що це створить непотрібні клопоти з маржами та подібними, оскільки ви ефективно піднімаєте елементи списку з коробки.

— hbw

1

@htw: Ви можете повернути його назад у передачу за допомогою будь-якого рішення clearfix.

— alex

2

Ви завжди можете використовувати display: inline-block, якщо хочете зберегти природу блоку ... хоча це не повністю підтримується на цьому етапі (я вважаю, що головний винуватець саме Fx2).

— Джеймс Б

17

Ви також можете встановити, що вони пливуть праворуч.

#ul_top_hypers li {
    float: right;
}

Це дозволяє їм все ще бути на рівні блоку, але відображатимуться в тому ж рядку.

— алекс
джерело

1

Плаваючи ними право матиме додатковий афект: він змінить порядок їх, так що зліва направо вони будуть останніми першими.

— Меттью Джеймса Тейлора

Ага так, їх потрібно буде змінити в розмітці (стільки для розділення макета / розмітки!)

— alex

11

Встановіть displayвластивість inlineдля списку, до якого потрібно застосувати. Існує хороше пояснення щодо відображення списків на A List Apart .

— Пол Морі
джерело

8

Як сказав @alex, ви можете пропустити його праворуч, але якщо ви хочете зберегти розмітку однаковою, переведіть її вліво!

#ul_top_hypers li {
    float: left;
}

— tjhorner
джерело

7

Він буде працювати для вас:

#ul_top_hypers li {
    display: inline-block;
}

— vikram mohod
джерело

4

Як уже згадувалося, ви можете встановити 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>

Розгорніть фрагмент

— Метью Джонсон
джерело

3

#ul_top_hypers li {
  display: flex;
}

— Кумар Сакет
джерело