Ключевое слово list-item заставляет элемент генерировать псевдоэлемент ::marker с содержимым,заданным свойствами list-style (например,bullet point).
<display-listitem> Ключевое слово list-item заставляет элемент генерировать псевдоэлемент ::marker с содержимым, заданным его свойствами стиля списка (например, маркером), вместе с основным полем указанного типа для его элемента. собственное содержание.
inline-flex.Отображает элемент как гибкий контейнер на уровне инлайн.inline-grid.Отображает элемент как контейнер сетки на уровне инлайн.
Значение display:inline-block По сравнению с display:inline,основное отличие заключается в том,что display:inline-block позволяет задать ширину и высоту элемента.Кроме того,при display:inline-block соблюдаются верхнее и нижнее поля/отступы,а при display:inline-нет.
Если вы хотите сделать этот навигационный неупорядоченный список горизонтальным,у вас есть два варианта:Сделать элементы списка inline вместо блока по умолчанию.
Тег <li> определяет элемент списка. Тег <li> используется внутри упорядоченных списков (<ol>), неупорядоченных списков (<ul>) и в списках меню (<menu>). В <ul> и <menu> элементы списка обычно отображаются с маркерами. В <ol> элементы списка обычно отображаются цифрами или буквами.
Flexbox-это чисто css-макет,что означает,что весь макет управляется и контролируется на уровне css,нет необходимости играть с разметкой.Flex-макет способен регулировать высоту/ширину своих элементов,чтобы наилучшим образом заполнить доступное пространство контейнера.Она может расширяться или сжиматься,чтобы избежать переполнения.
В идеальном мире поддержки браузера причина, по которой вы выбрали бы использование flexbox, заключается в том, что вы хотите разместить набор элементов в том или ином направлении. Когда вы размещаете свои элементы, вы хотите контролировать размеры элементов в этом одном измерении или контролировать расстояние между элементами.
list-item
ключевых слова вызывают элемент для генерации ::marker
псевдо-элемента с содержимым , указанным его list-style
свойства (например , точку пули) вместе с основной коробкой указанного типа для его собственного содержания.
Syntax
Одно значение элемента list-item
приведет к тому, что элемент будет вести себя как элемент списка. Это можно использовать вместе с list-style-type
и list-style-position
list-item
также можно комбинировать с любым ключевым словом <display-outside>
и ключевыми словами flow
или flow-root
<display-inside>
.
Примечание. В браузерах, поддерживающих двухзначный синтаксис, если внутреннее значение не указано, по умолчанию используется flow
. Если не указано внешнее значение, то главный блок будет иметь внешний вид отображения block
.
Formal syntax
<display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item <display-outside> = block | inline | run-in
Examples
HTML
<div>I will display as a list item</div>
CSS
.fake-list { display: list-item; list-style-position: inside; }
Result
Specifications
Specification |
---|
Модуль отображения CSS, уровень 3 # typedef-display-listitem |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox для Android | Opera Android | Safari на IOS | Samsung Internet | |
display-listitem | 1 | 12 | 1 | 6 | 7 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1. 0 |
legend-support | 71 | 79 | 64 | No | 58 | No | 71 | 71 | 64 | No | 10.0 |
See also
-
display
<display-outside>
<display-inside>
<display-internal>
<display-box>
<display-legacy>
- 1
- …
- 477
- 478
- 479
- 480
- 481
- …
- 865
- Next
<display-outside>
html — Какая польза от отображения «элемент списка» в CSS, если нет отображения «список»?
спросил
Изменено 8 лет, 2 месяца назад
Просмотрено 14 тысяч раз
Я хочу создать элемент списка HTML с элементами списка из тегов div. я знаю что display:list-item
, но если у меня есть это:
- А
- Б
- С
, чтобы получить это:
.item { display: list-item}; .list {отображение: блок};
<дел>АБС
меня никуда не приведет.
Вопрос: Спасибо! Элементы списка HTML — такие, как Единственная разница в том, что UA применяет некоторые Как видно, есть Таким образом, чтобы имитировать эффект В качестве альтернативы мы можем изменить положение маркеров на 0 С элементом списка Элемент создает блок-бокс для содержимого и отдельный встроенный блок-элемент списка Итак, вам нужно определить элемент списка, это свойство позволяет вам определить другие свойства, например: Проверьте эту демо-скрипту Примечание >> Если вы хотите определить какое-то изображение типа маркера, я предлагаю метод ответа @Doctus, но если вам нужны числовые значения, давайте пойдем с этим и изменим 0 То, что у вас есть, будет работать нормально. Все, что вам нужно сделать, это добавить свойство в стиле списка Напр. 4 Я бы даже не заморачивался с отображением http://jsfiddle.net /0j5uch7q/ Возможно, вы захотите поиграть с позиционированием, но это основа. 3 Зарегистрируйтесь с помощью Google Зарегистрироваться через Facebook Зарегистрируйтесь, используя электронную почту и пароль Электронная почта Обязательно, но не отображается Электронная почта Требуется, но не отображается Могу ли я использовать ?
Есть ли способ получить
эквивалентен с использованием тегов
display:list-item
, когда display:list
не существует?
,
,
— Block -Level -Levels,
,
- это Block -Level -Level,
,
, который является универсальным контейнером блочного уровня.
- являются блоками,
,
- это блокировки
,
- div>
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: внутри
к элементам списка.
вы делаете это: .list > div {
дисплей: элемент списка;
тип-стиля-списка: диск;
позиция стиля списка: внутри;
}
звездочки
на десятичное число
к элементу
. list
. .элемент {
отображение: элемент списка;
стиль списка: диск внутри;
}
: list-item
.список
{
дисплей: блок;
отступ слева: 20px;
}
.предмет
{
дисплей: блок;
нижняя граница: 2px;
положение: родственник;
}
.элемент: до
{
содержание: " ";
дисплей: блок;
ширина: 6 пикселей;
высота: 6 пикселей;
радиус границы: 3px;
фон: #000;
положение: абсолютное;
слева: -13px;
верх: 6 пикселей;
}
<ул>
Зарегистрируйтесь или войдите в систему
Опубликовать как гость
Опубликовать как гость
Свойство CSS: отображение: элемент списка | Могу ли я использовать.
.. Таблицы поддержки для HTML5, CSS3 и т. д. Свойство CSS: отображение: элемент списка
Глобальное использование
97,57% + 0% знак равно 97,57%
IE
- 6–10: поддерживается
- 11: поддерживается
Edge
- 12 - 107: Supported
- 108: Supported
Firefox
- 2 - 106: Supported
- 107: Supported
- 108 - 109: Supported
Chrome
- 4 - 107: Supported 06% - Supported"> 108: Supported
- 109 - 111: Supported
Safari
- 3.1 - 16.1: Supported
- 16.2: Supported
- 16.3 - TP: Supported
Opera
- 10 - 91: Supported
- 92: Supported
Safari on iOS
- 3.2 - 16.1: Supported
- 16.2: Supported
- 16.3: Supported
Opera Mini
- all: Support unknown
Android Browser
- 2.1–4.4.4: поддержка неизвестна 00% - Supported"> 108: поддерживается
Opera Mobile
- 12–12.1: не поддерживается
- 72: поддерживается
- 108: Supported
- 107: Supported
- 13.4: Support unknown
- 4 - 18.0: Supported
- 19.0: Supported
- 13.1: Support unknown
- 13.18: Support unknown