Как отредактировать <li> бок о бок?

Ответ 1

li {
    display: inline;
}

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

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

Ответ 2

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

li {
    float: left;
}

Ответ 3

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

li { display: inline-block; }

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

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

Ответ 4

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

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

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

Ответ 5

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

Ответ 6

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

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

он будет работать для уверенности...

Ответ 7

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

li {
    float: left;
    display: inline;
}

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

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

Ответ 8

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

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

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