Как я могу заставить элементы <li> перемещаться слева направо, а не сверху вниз?

Вот мои элементы <li>. Я хочу, чтобы они отображались слева направо, а не сверху вниз.

<div class="nav">
  <ul>
    <li><a href="test">test</a></li>
    <li><a href="test">test</a></li>
    <li><a href="test">test</a></li>
    <li><a href="test">test</a></li>
    <li><a href="test">test</a></li>
  </ul>
</div>

Как я могу это сделать?

EDIT: как управлять интервалом между каждым элементом li и его цветовым цветом и интервалом между элементом и границей элемента li?

ОТВЕТЫ

Ответ 1

Я думаю, что вы ищете

li {
  display:inline;
}

Ответ 2

Есть несколько способов.

Один из способов - отображение: inline, поскольку в других сообщениях упоминается

Другой способ - float: left;

изменить: подробнее! попробуйте это на странице 

<style>
/* style 1 */
div.nav1 ul li
{
  display:inline;

  border: solid 1px black;
  padding: 10px;
  margin: 10px;

  list-style-type: none;
  line-height: 4em;
}

/* style 2 */
div.nav2 ul li
{
  float: left;
  border: solid 1px black;
  padding: 10px;
  margin: 10px;

  list-style-type: none;
}
</style>

<h1>using display: inline;</h1>
<div class="nav1">
<ul>
<li><a href="#">inline</a></li>
<li><a href="#">inline blah bla</a></li>
<li><a href="#">i am not so neat on</a></li>
<li><a href="#">inline</a></li>
<li><a href="#">wrapping and I probably</a></li>
<li><a href="#">inline</a></li>
<li><a href="#">need a bit of work and tweaking</a></li>
<li><a href="#">inline</a></li>
<li><a href="#">the "line-height" css property</a></li>
<li><a href="#">inline</a></li>
<li><a href="#">to make me wrap better</a></li>
<li><a href="#">inline</a></li>
<li><a href="#">also notice how i tend to break a line up into .. two.  see?  make your browser narrow.</a></li>
<li><a href="#">inline</a></li>
</ul>
</div>

<hr />

<h1>using float:left;</h1>
<div class="nav2">
<ul>
<li><a href="#">floated left</a></li>
<li><a href="#">i tend to behave</a></li>
<li><a href="#">floated left</a></li>
<li><a href="#">better for wrapping</a></li>
<li><a href="#">floated left</a></li>
<li><a href="#">when the list</a></li>
<li><a href="#">floated left</a></li>
<li><a href="#">reaches the edge of the page</a></li>
<li><a href="#">floated left</a></li>
</ul>
</div>

Ответ 3

Try:

<style>
.nav li {display:inline;}
</style>
<div class="nav">
        <ul>
                <li><a href="test">test</a></li>
                <li><a href="test">test</a></li>
                <li><a href="test">test</a></li>
                <li><a href="test">test</a></li>
                <li><a href="test">test</a></li>
        </ul>
</div>

Стили должны быть действительно во внешней таблице стилей, я просто помещаю их на страницу для простоты.

Ответ 4

Вы можете использовать атрибут float:

.nav ul li{float:left;}

Ответ 5

Просто, чтобы сообщить вам, что IE делает "уступчивую" вещь, когда вы плаваете элементы списка слева, и я думаю, что IE является единственным браузером для этого, все остальные продолжают идти прямо. Чтобы элементы списка проходили напрямую, используйте "display: inline" в вашем css вместо "float: left", это должно работать во всех браузерах таким образом. Подробнее об этом объясните, быстрый учебник

Ответ 6

.nav li  { display: inline }

Для получения дополнительной информации и вдохновения посмотрите Listamatic. У них есть тонны превосходных обучающих программ с пошаговыми объяснениями и все о проблемах с запасом, дополнением и браузером.

Ответ 7

Чтобы ответить на вопрос после редактирования:

li {
    float: left;
    display: block;
    padding: 4px 12px;   /* example spacing */
    margin: 0px 4px;     /* example margin */
}

Изменить: Возможно, вы захотите применить отступы и отображение: блок в <a> чтобы вы могли также щелкнуть на дополнении:

li {
    float: left;
    margin: 0px 4px;     /* example margin */
}
li a {
    display: block;
    padding: 4px 12px;   /* example spacing */
}

Ответ 8

Вы можете использовать display: inline, например:

li{
    display: inline;
}

Или, если у вас больше списков, вы можете назначить класс для этого конкретного списка:

<ul class="navbar horizontal">
    <li>Test</li>
</ul>

И затем используйте стиль:

.horizontal{
    display: inline;
}