Как я могу рендерить <li>бок о бок?

Question

Я хочу создать меню навигации с элементами списка, отображаемыми в одну строку. Как мне это сделать?

Answer 1

li {
    display: inline;
}

РЕДАКТИРОВАТЬ: Теперь я понимаю, почему я чувствовал странный ответ с display: inline: потому что я обычно использую float: left вместо себя, что является ответом Энтони-Арнольда (так к нему идет мое возражение!).

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

Answer 2

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

li {
    float: left;
}

Answer 3

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

li { display: inline-block; }

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

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

Answer 4

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

Они предлагают li {display: inline;} и li {float: left;} в зависимости от желаемого эффекта.

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

Answer 5

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

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;
} 

это точно будет работать ...

Answer 6

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

Answer 7

ul {
    float: right;  to <li> go to the Right or Left side
}

ul li {
    display: inline-block;
    padding: 10px;
    margin-top: 5px;
}

Если вы используете «float:» в «li», список будет инвертировать последовательность.

Answer 8

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

li {
    float: left;
    display: inline;
}

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

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