it-swarm.com.ru

Почему стиль списка исчезает при отображении: блок добавляется к элементу списка в списке (<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>)

23
Fredrik

Это потому, что обычно 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> например.

45
Martijn Pieters

Обновленное решение заключается в использовании :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>
11
pappy

Ответ Мартина верен, но не дает решения, а 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>

1
dwilt

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

<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;
}
1
Omer S

Решение для 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>
0
Asher Garland