Как я представляю <литий> бок о бок?

li {
    display: inline;
}

EDIT: Теперь я понимаю, почему я чувствовал себя странно, отвечая display: inline: потому что я обычно использую float: left вместо этого, а это ответ anthony-arnold'а (так что ему мой upvote!).

В любом случае, хотя любой из этих методов приведет к тому, что ваши li будут отображаться в одну строку, встроенные и плавающие элементы ведут себя по-разному. В зависимости от того, как вы оформили свой макет, вам, возможно, придется выбрать тот или иной способ.

Вы также можете сделать это в некоторых ситуациях:

li {
    float: left;
}

Один из лучших ресурсов по этому вопросу - http://css.maxdesign.com.au/listamatic/ (правда, немного устаревший).

Они предлагают как li {display: inline;} и li {float: left;} в зависимости от эффекта, который вы хотите получить.

Посмотрите, например, их "Простой горизонтальный список" http://css.maxdesign.com.au/listamatic/horizontal01.htm

ul {display: inline;} 
ul li { list-style: none;display: inline;}

Вы можете сделать:

li {
    float: left;
    display: inline;
}

Если вы хотите сохранить его характеристики блока, но все же необходимо расположить рядом, вы можете:

li {
    float: left;
    display: inline-block;
}

попробуйте этот стиль

li{
height:20px;
float:left;
list-style-type: none;
width:70px;
padding:3px;
border-right:1px solid #3687AF;
background-color: #015287;
background-repeat: no-repeat;
background-position: center 30px;
} 

он наверняка сработает ...

Мой любимый способ сделать это - использовать, потому что он позволяет использовать ширину, высоту, поля и отступы:

li { display: inline-block; }

Но есть некоторые проблемы с рендерингом в IE, чтобы исправить использование (порядок важен ):

li 
{ 
  display: inline-block; 
  zoom: 1;
  *display: inline;
}