css list inline не перечисляет элементы по горизонтали? - PullRequest
Новая
       25

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

15 голосов
/ 24 сентября 2010

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

это мой код: 

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

Ответы [ 5 ]

28 голосов
/ 24 сентября 2010

Это потому, что элемент 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>

Но, возможно, это может быть только я =)

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

20 голосов
/ 24 сентября 2010

Вы забыли добавить свойство 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>
4 голосов
/ 24 сентября 2010
Теги

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

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

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

2 голосов
/ 10 августа 2013

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

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

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

1 голос
/ 03 сентября 2013

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

...