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

Question

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

Answer 1

Элементы списка обычно являются блочными элементами. Превратите их во встроенные элементы с помощью свойства 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>

Answer 2

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

#ul_top_hypers li {
    float: right;
}

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

Answer 3

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

Answer 4

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

#ul_top_hypers li {
    float: left;
}

Answer 5

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

#ul_top_hypers li {
    display: inline-block;
}

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

Answer 7

#ul_top_hypers li {
  display: flex;
}