Как сделать отображение <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>
Развернуть фрагмент

Мэтью Джонсон
источник