поведение перегрузки <li>в CSS?

Question

HTML5, CSS.

У меня есть набор элементов, которые выложены в виде <li></li> в <ul>

Вместо того, чтобы быть в отдельной строке (да, традиционныйповедение ..) Есть ли способ заставить их всех стоять рядом друг с другом?

так:

Adam
Eve
Tom
Jasmine

становится:

Adam  Eve  Tom  Jasmine

Answer 1

Этот CSS сделает это:

li {display: inline;}

Очевидно, что CSS-идентификатор должен охватывать не все теги li, а только ваш конкретный регион. Затем вы можете использовать поля или отступы для тегов li для управления горизонтальным интервалом.

Вы можете увидеть это в действии здесь: http://jsfiddle.net/jfriend00/GJqy6/

Более полный пример:

HTML:

<ul id="navbar">
    <li>Adam</li>
    <li>Eve</li>
    <li>Tom</li>
    <li>Jasmine</li>
</ul>

CSS:

#navbar li {display: inline; padding: 0 10px;}

Отображение:

Adam   Eve   Tom   Jasmine

Эта структура очень часто используется для панелей навигации в верхней части веб-страниц (в этом случае внутри тегов LI есть теги <a>.

Answer 2

Да

 li { float: left; }

Это очень часто используется в пунктах меню.