Как сделать отображение <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>

Развернуть фрагмент

— толстушка
источник

2

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

— Joel

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;
}

— Викрам Моход
источник

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;
}

— Кумар Сакет
источник