Css list inline не перечисляет элементы по горизонтали?

Я не знаю, почему это не отображается правильно, список предназначен для отображения по горизонтали? Вместо этого он отображается вертикально!

это мой код:

#stats li {
  display: inline;
  list-style-type: none;
  padding-right: 20px;
}
<ul id="stats">
  <li>
    <h1>53</h1>
    </a>
  </li>
  <li>
    <h1>67</h1>
    </a>
  </li>
</ul>

Ответы

Ответ 1

Вы забыли добавить свойство float: left в свой CSS:


#stats li
{
  display: inline;
  list-style-type: none;
  padding-right: 20px;
  float: left;
}

Кстати, вам не хватает тега a в вашем примере HTML. Должно быть


<li><a href="#"><h1>53</h1></a></li>

Ответ 2

Это потому, что элемент h1 по умолчанию является элементом уровня блока.

Добавить

h1 {display: inline; }

для вашего css, и они работают так, как вам хочется.

В отдельном примечании стоит отметить, что на странице должно быть только одно h1, все остальные заголовки семантически ниже этого заголовка и являются подзаголовками. Подумайте об этом как о книге, название книги будет h1, главы h2 и т.д.

Я бы посоветовал, немного изменив свой html:

<ul id="stats">
    <li><a href="#"><span class="listHeader">53</span></a></li>
    <li><a href="#"><span class="listHeader">67</span></a></li>
</ul>

Но это может быть, возможно, просто me =)

Вот статья, чтобы поддержать мою точку зрения:

Ответ 3

h1 теги по умолчанию как display:block;, поэтому он имеет приоритет.

Кроме того, после закрытия тегов <h1> у вас есть теги </a>, но нет открывающих тегов. Это может вызвать проблемы в старых браузерах.

В-третьих, какая цель размещения тегов h1 внутри li s? Семантически это не имеет смысла.

Ответ 4

Существует несколько решений: вы можете изменить li для отображения: inline-block; или h1 для отображения: inline; (имейте в виду использовать только один h1 на сайт и использовать его семантически правильно! Если вам просто нужно стилизовать слово или предложение, которое на самом деле не является h2 или 3, тогда используйте span, em или strong.

Также важно, чтобы inline-a-Tag не мог заключить блок-независимо-тег, если вы не разрабатываете для HTML5, где вы можете заключить только что-нибудь в a-Tag.

Кроме того, если вы можете, опустите плавающее значение для вещи, которая может быть достигнута с более обратной совместимостью

Ответ 5

Использование display: inline-block, поскольку sternAndy предлагает, вероятно, правильное решение здесь. Inline не очень полезен ни для чего, кроме элементов, у которых нет вложенных элементов внутри них.