Как сделать отображение <ul> в горизонтальной строке

Ответ 1

Элементы списка обычно являются элементами блока. Поверните их в встроенные элементы с помощью свойства display.

В коде, который вы указали, вам нужно использовать селектор контекста, чтобы свойство display: inline применялось к элементам списка, а не к самому списку (применение display: inline к общему списку не будет иметь эффекта):

#ul_top_hypers li {
    display: inline;
}

Ответ 2

Вы также можете установить их для перемещения вправо.

#ul_top_hypers li {
    float: right;
}

Это позволяет им оставаться блочным уровнем, но будет отображаться в одной строке.

Ответ 3

Задайте для свойства display значение inline для списка, к которому вы хотите применить это. Там есть хорошее объяснение отображения списков на A List Apart.

Ответ 4

Как сказал @alex, вы можете плавать вправо, но если вы хотите сохранить разметку одинаково, плавайте ее влево!

#ul_top_hypers li {
    float: left;
}

Ответ 5

Он будет работать для вас:

#ul_top_hypers li {
    display: inline-block;
}

Ответ 6

Как уже упоминалось, вы можете установить li в display:inline; или float в li влево или вправо. Кроме того, вы также можете использовать display:flex; на ul. В нижеприведенном фрагменте я добавил justify-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>

Ответ 7

#ul_top_hypers li {
  display: flex;
}