Почему стиль списка исчезает при отображении: блок добавляется к элементу списка в списке (<ul> или <ol>)?

Это, похоже, справедливо и для display: inline; и display: inline-block;.

Вот что я имею в виду:

ul li {
  display: block;
  /* Or display: inline; */
  /* Or display: inline-block; */
}

<ul>
  <li>list item1</li>
  <li>list item3</li>
  <li>list item3</li>
</ul>

И со стилем списка я имею в виду фактические "пули" или "числа" (когда используется <ol>)

Ответы

Ответ 1

Это потому, что обычно display устанавливается в list-item для <li> элементов. См. Спецификацию W3C CSS3: http://www.w3.org/TR/css3-lists/#declaring-a-list-item.

Чтобы объявить элемент списка, свойство отображения должно быть установлено в 'list-item.

Обратите внимание, что вы можете дать произвольным элементам HTML одинаковое поведение; установите display: list-item на a <div>, например.

Ответ 2

Обновленное решение состоит в использовании :before и content.

См. этот JSfiddle для рабочего примера. http://jsfiddle.net/t72h3/

ul li {
  display: inline-block;
}

ul li:before {
  content: "• ";
}

<ul>
  <li>list item1</li>
  <li>list item3</li>
  <li>list item3</li>
</ul>

Ответ 3

Ответ Martin верен, но не дает решения, и Pappy применим только в том случае, если вы хотите получить патроны или легко получить доступ к идентификатору li. В моем случае мне нужно иметь ol с upper-alpha, чтобы это было невозможно.

Самый короткий способ для нас заключался в том, чтобы установить свойство inline (inline, inline-block, inline-flex), а также vertical-align: top для непосредственного дочернего элемента li:

ol {
  list-style: upper-alpha;
  
  > li {
    display: block;
  }
}

.list-item-content {
  display: inline-block; // any inline property will work
  vertical-align: top;
}

<ol>
  <li>
    <div class="list-item-content">Some text</div>
  </li>
</ol>

Ответ 4

Способ получения эффекта:

<ol> <li> <a href="mylink">desc</a> </li> </ol>

CSS

li {list-style-position: inside; display: inline-block;} /* or block */ li a {display: list-item; padding: 10px 20px;}