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

Question

Кажется, что это справедливо и для 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>)

Answer 1

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

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

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

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

Answer 3

Способ получить эффект будет:

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

Answer 4

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

Кратчайший путь для этого для нас заключался в том, чтобы поместить в строку (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>

Answer 5

Решение для ul

ul {
    list-style: none;
    display: block;
    padding: 0;
}

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

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

Решение для ol с использованием встречное увеличение

ol {
    list-style: none;
    display: block;
    padding: 0;
    counter-reset: my-counter;
}

ol li {
  counter-increment: my-counter;
}

ol li::before {
  content: counter(my-counter) ". ";
}

<ol>
  <li>list item1</li>
  <li>list item3</li>
  <li>list item3</li>
</ol>