List display item: — CSS: Cascading Style Sheets

<display-listitem> =   <display-outside>?     &&  [ flow | flow-root ]?  &&  list-item              <display-outside> =   block   |  inline  |  run-in  

<div>I will display as a list item</div>

.fake-list {
  display: list-item;
  list-style-position: inside;
}

 

  
А
  
Б
  
С
 
 

 .item { display: list-item};
.list {отображение: блок}; 

 <дел>
  
А
  
Б
  
С

меня никуда не приведет.

Вопрос:
Есть ли способ получить

эквивалентен с использованием тегов
, и почему отображается display:list-item , когда display:list не существует?

Спасибо!

• HTML
• CSS
• СПИСОК
• ADSACTIP -DESIGE

Элементы списка HTML — такие, как

,
,

— Block -Level -Levels, ,

- это Block -Level -Level, ,

- являются блоками,

,

- это блокировки

,

- div> , который является универсальным контейнером блочного уровня.

Единственная разница в том, что UA применяет некоторые padding , margin к этим элементам в таблице стилей пользовательского агента. Например, Google Chrome применяет следующее к элементам

:

 ul, menu, dir {
  дисплей: блок;
  тип-стиля-списка: диск;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
}
 

Как видно, есть отступ справа от

, что позволяет отображать маркеры (маркеры) рядом с каждым элементом (слева). Иначе бы они торчали из коробки и их не было бы видно.

Таким образом, чтобы имитировать эффект

, вы получите что-то вроде этого:

 .list {
    поле сверху: 1em;
    нижняя граница: 1em;
    отступ слева: 40px;
}
 

В качестве альтернативы мы можем изменить положение маркеров на внутри коробки, указав list-style-position: внутри к элементам списка.

0

С элементом списка вы делаете это:

Элемент создает блок-бокс для содержимого и отдельный встроенный блок-элемент списка

Итак, вам нужно определить элемент списка, это свойство позволяет вам определить другие свойства, например:

 .list > div {
    дисплей: элемент списка;
    тип-стиля-списка: диск;
    позиция стиля списка: внутри;
}
 

Проверьте эту демо-скрипту

Примечание >>

Если вы хотите определить какое-то изображение типа маркера, я предлагаю метод ответа @Doctus, но если вам нужны числовые значения, давайте пойдем с этим и изменим звездочки на десятичное число

0

То, что у вас есть, будет работать нормально. Все, что вам нужно сделать, это добавить свойство в стиле списка к элементу . list .

Напр.

 .элемент {
    отображение: элемент списка;
    стиль списка: диск внутри;
}
 

4

Я бы даже не заморачивался с отображением : list-item

, создайте контейнер, вложите в него элементы div, а затем используйте псевдоэлементы для создания маркеров:

http://jsfiddle.net /0j5uch7q/

 .список
{
    дисплей: блок;
    отступ слева: 20px;
}

.предмет
{
    дисплей: блок;
    нижняя граница: 2px;
    положение: родственник;
}

.элемент: до
{
    содержание: " ";
    дисплей: блок;
    ширина: 6 пикселей;
    высота: 6 пикселей;
    радиус границы: 3px;
    фон: #000;
    положение: абсолютное;
    слева: -13px;
    верх: 6 пикселей;
} 

 <ул>
    
А
    
Б
    
С

<час> <дел>
А
Б
С

Возможно, вы захотите поиграть с позиционированием, но это основа.

3

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Свойство CSS: отображение: элемент списка | Могу ли я использовать.

.. Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

Свойство CSS: отображение: элемент списка

• Глобальное использование

  97,57% + 0% знак равно 97,57%

IE

1. 6–10: поддерживается
2. 11: поддерживается

Edge

1. 12 - 107: Supported
2. 108: Supported

Firefox

1. 2 - 106: Supported
2. 107: Supported
3. 108 - 109: Supported

Chrome

1. 4 - 107: Supported
2. 06% - Supported"> 108: Supported
3. 109 - 111: Supported

Safari

1. 3.1 - 16.1: Supported
2. 16.2: Supported
3. 16.3 - TP: Supported

Opera

1. 10 - 91: Supported
2. 92: Supported

Safari on iOS

1. 3.2 - 16.1: Supported
2. 16.2: Supported
3. 16.3: Supported

Opera Mini

1. all: Support unknown

Android Browser

1. 2.1–4.4.4: поддержка неизвестна
2. 00% - Supported"> 108: поддерживается

Opera Mobile

1. 12–12.1: не поддерживается
2. 72: поддерживается

5 9 для Android0175

1. 108: Supported

Firefox for Android

1. 107: Supported

UC Browser for Android

1. 13.4: Support unknown

Samsung Internet

1. 4 - 18.0: Supported
2. 19.0: Supported

QQ Browser

1. 13.1: Support unknown

Baidu Browser

1. 13.18: Support unknown

KaiOS Browser