Стиль списка CSS - маркер маркера не отображается даже с соответствующим типом стиля списка

Я явно стилизовал свои элементы ul так, чтобы они имели list-style-type: disc. Элементы li внутри ul автоматически наследуют этот стиль. Другими словами, перед каждым элементом li должен стоять маркер (что означает disc).

ul {
  list-style-type: disc; /* Does not work */
}
li {
  display: block;
}
<ul>
  <li>Foo</li>
  <li>Bar</li>
  <li>Baz</li>
</ul>

Инструмент разработчика Firefox Inspector правильно распознает, что все li элементы в списке имеют (унаследованное) значение «диск» для свойства list-style-type.

Однако, как вы также можете увидеть, если вы запустите фрагмент, диск (то есть маркер) на самом деле НЕ отображается в представлении браузера. Вместо этого список отображается так, как если бы list-style-type был определен как none (т. е. перед элементами li не видно маркера или какого-либо символа).

Мне интересно, как это вообще возможно: кажется, что отображение браузера (без маркера) прямо противоречит объявлению list-style-type: disc, как правильно показано в инструменте Inspector.

У кого-нибудь есть объяснение очевидного противоречия между тем, что говорит инструмент Inspector (правильно), и фактическим представлением браузера?


person Holland    schedule 08.03.2016    source источник


Ответы (1)


Это потому, что у него есть

display: block;

Если вам нужен маркер, правильное отображение должно быть

display: list-item;

Обратите внимание, что это должно быть значение по умолчанию для li элементов. таблица стилей по умолчанию для HTML 4 содержит

li { display: list-item }

2.3. Создание блоков маркеров: ключевое слово list-item

Ключевое слово list-item вызывает создание элемента поле псевдоэлемента ::marker [CSS-PSEUDO-4] с содержимым, указанным в list-style свойства (Списки CSS 2.1§12.5) [CSS2] вместе с основным блоком указанного типа для собственного содержимого.

В противном случае свойства list-style-* не применяются:

Применяется к: элементам с display: list-item

person Oriol    schedule 08.03.2016
comment
Да, я пробовал, и вы правы на 100%! Большое спасибо. Я приму ответ после времени ожидания. - person Holland; 09.03.2016