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

Как я могу сделать мои элементы списка отображаются горизонтально в строке с помощью 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>‣ <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>‣ <a href="" class="a_top_hypers"> Compose</a></li>
        <li>‣ <a href="" class="a_top_hypers"> Reports</a></li>
        <li>‣ <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>‣ <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>
7 81
html css html-lists

7 ответов:

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

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

#ul_top_hypers li {
    display: inline;
}
105

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

#ul_top_hypers li {
    float: right;
}

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

15

установить display свойство inline для списка, к которому вы хотите применить это. Есть хорошее объяснение отображения списков на Список Только.

11

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

#ul_top_hypers li {
    float: left;
}
7

как уже упоминалось, вы можете установить li до display:inline; или float the 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>
3

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

#ul_top_hypers li {
    display: inline-block;
}
3
#ul_top_hypers li {
  display: flex;
}
2