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

Question

Вот мои <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>

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

РЕДАКТИРОВАТЬ : как управлять расстоянием между каждым элементом li и его цветом bachground и расстоянием между элементом и границей элемента li?

Answer 1

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

li {
  display:inline;
}

Answer 2

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

Один способ отображения: встроенный, как упоминают другие сообщения

Другой способ это 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>

Answer 3

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

.nav ul li{float:left;}

Answer 4

Попробуйте:

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

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

Answer 5

.nav li  { display: inline }

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

Answer 6

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

Answer 7

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

li{
    display: inline;
}

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

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

А затем стилизовать это как:

.horizontal{
    display: inline;
}

Answer 8

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

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

Редактировать: Возможно, вы захотите применить заполнение и блок display: к элементу , чтобы можно было также нажать на заполнение:

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