Ключевое слово 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-нет.
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; }
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 | 50 | No | 10. |
0See also
-
display<display-outside><display-inside><display-internal><display-box><display-legacy>
CSS
-
<display-internal>
Некоторые модели компоновки,такие как table и ruby,имеют сложную внутреннюю структуру,с несколькими различными ролями,которые могут выполнять их дочерние потомки. -
<display-legacy>
В CSS 2 использовался синтаксис одного слова для свойства display,что требовало отдельных вариантов одного и того же режима компоновки на уровне блока и на уровне инлайна.
-
Ключевые слова <display-outside> определяют внешний тип элемента, который, по сути, определяет его роль в потоке. Допустимые значения <display-outside>: Элемент генерирует блок
-
Адаптация к новому двухзначному синтаксису отображения
Модуль отображения CSS Уровень 3 описывает синтаксис двух значений для свойства.
- 1
- …
- 472
- 473
- 474
- 475
- 476
- …
- 857
- Next
[CSS] — Как изменить цвет элементов списка в CSS — SheCodes
Узнайте, как стилизовать элементы списка в CSS, выбрав нужный элемент и используя свойство list-style-color.
👩💻 Технический вопрос
Спросил 5 месяцев назад в CSS Элиза
почему dwhen пытаясь изменить цвет моего элемента списка в css, он меняет только цвет моего маркера?
УС Элемент списка цвет пункт списка цвет стиля списка
Дополнительные вопросы по кодированию о CSS👩💻 Технический вопрос
Спросил 5 часов назад в CSS от Claudia
box-shadow
CSS коробка-тень эффект тени элемент имущество
👩💻 Технический вопрос
Спросил 1 день назад в CSS Мария
какой фон: прозрачный;
фон прозрачный Свойства CSS
👩💻 Технический вопрос
Спросил 2 дня назад в CSS Эми
как изменить цвет заголовка в CSS
CSS цвет рубрика
👩💻 Технический вопрос
Спросил 4 дня назад в CSS Аррон
как сделать h4 hover?
УС парить h4 элемент псевдокласс
👩💻 Технический вопрос
Спросил 4 дня назад в CSS от Tshiamo
фон с линейным градиентом в css означает
фон линейный градиент КСС
👩💻 Технический вопрос
Спросил 4 дня назад в CSS от Мэри
как изменить цвет кнопки
кнопка цвет CSS-код цвет фона
👩💻 Технический вопрос
Спросил 4 дня назад в CSS от Kiara
как центрировать элементы ul по горизонтали в css
center ул предметы горизонтально
👩💻 Технический вопрос
Спросил 4 дня назад в CSS по А
как удалить отступы на кнопке
кнопка набивка КСС
👩💻 Технический вопрос
Спросил 4 дня назад в CSS by Marta
как сдвинуть кнопку немного вправо
CSS позиционирование допуск слева
👩💻 Технический вопрос
Спросил 5 дней назад в CSS к кануну
что делает display: block?
дисплей блокировать в соответствии блочный уровень ширина высота набивка поля
👩💻 Технический вопрос
Спросил 5 дней назад в CSS by Eve
как увеличить межсимвольный интервал в css
межсимвольный интервал CSS межбуквенный интервал
👩💻 Технический вопрос
Спросил 5 дней назад в CSS by Arron
как навести ссылку?
УС связь парить псевдокласс
👩💻 Технический вопрос
Спросил 5 дней назад в CSS от Arron
как добавить тень к моей кнопке?
кнопка тень CSS коробка-тень
👩💻 Технический вопрос
Спросил 5 дней назад в CSS by Jana
Что означает курсор в CSS.
УС свойство курсора курсор мыши указатель по умолчанию помощь
👩💻 Технический вопрос
Спросил 5 дней назад в CSS Алисия
как стилизовать кнопку
стиль кнопка HTML CSS набивка граница курсор размер шрифта эффект наведения
👩💻 Технический вопрос
Спросил 6 дней назад в CSS by Thembekile
Как сделать переход при наведении кнопки?
кнопка переход при наведении КСС
👩💻 Технический вопрос
Спросил 6 дней назад в CSS Oswaldo
Как предотвратить подчеркивание ссылки после нажатия?
ссылка подчеркнуть CSS украшение текста посетил состояние
👩💻 Технический вопрос
Спросил 6 дней назад в CSS от Kiara
как настроить макет нескольких карт
пользовательский макет карты CSS флексбокс Сетка CSS
👩💻 Технический вопрос
Спросил 6 дней назад в CSS Киара
как сделать перенос текста в css
CSS перенос текста перенос слова переполнение-обертка
👩💻 Технический вопрос
Спросил 6 дней назад в CSS Ян
что делает переполнение в css
переполнение Свойство CSS вырезка содержимого полосы прокрутки
👩💻 Технический вопрос
Спросил 7 дней назад в CSS Вероника
как вставить изображение для фона в css
background-image фоновый повтор размер фона фоновая позиция
👩💻 Технический вопрос
Спросил 7 дней назад в CSS Сара
как убрать подчеркивание в кнопке
кнопка подчеркнуть CSS текст-украшение
👩💻 Технический вопрос
Спросил 7 дней назад в CSS Киара
как прокомментировать в css
комментарий
👩💻 Технический вопрос
Спросил 7 дней назад в CSS Киара
что такое сетка
сетка Веб-разработка адаптивные макеты CSS-фреймворки начальная загрузка
👩💻 Технический вопрос
Спросил 7 дней назад в CSS Лауренсия
как добавить тень к кнопке
кнопка коробка-тень КСС
👩💻 Технический вопрос
Спросил 7 дней назад в CSS автор Keitumetse Nirvana Akisa
Я борюсь со своим кодом.
Моя кнопка не работает, когда я нажимаю на нее, и я хочу выровнять свое изображение по центру код устранения неполадок кнопка прослушиватель событий выравнивание изображения CSS выравнивание по центру
👩💻 Технический вопрос
Спросил 8 дней назад в CSS by Kiara
как убрать подчеркивание из ссылки
удалить подчеркивание связь украшение текста КСС
👩💻 Технический вопрос
Спросил 8 дней назад в CSS by Kiara
как убрать строку из ссылки
CSS связь украшение текста подчеркнуть удалить
👩💻 Технический вопрос
Спросил 8 дней назад в CSS Киара
как поставить теневую границу вокруг контейнера
CSS теневая граница контейнер
👩💻 Технический вопрос
Спросил 8 дней назад в CSS по christrice
как создать наведение?
наведение CSS псевдокласс
👩💻 Технический вопрос
Спросил 9 дней назад в CSS Анастасия
как изменить размер шрифта с помощью @media
CSS размер шрифта @медиа
👩💻 Технический вопрос
Спросил 9 дней назад в CSS от Rizwana
как подчеркнуть заголовок с помощью css
подчеркнуть заголовок текст-украшение
👩💻 Технический вопрос
Спросил 10 дней назад в CSS by Arianne
как сделать толщину шрифта тонкой
толщину шрифта тонкий Свойство CSS ценить пример кода
👩💻 Технический вопрос
Спросил 10 дней назад в CSS by christrice
как сделать углы круглыми?
радиус границы Свойство CSS углы округлость CSS-трюки
👩💻 Технический вопрос
Спросил 10 дней назад в CSS Элизабет
Можете ли вы помочь мне понять высоту строки
высота строки Свойство CSS
👩💻 Технический вопрос
Спросил 10 дней назад в CSS by Olivia
что такое набивка
набивка Веб-разработка CSS единицы измерения пикселей Эмс проценты
👩💻 Технический вопрос
Спросил 10 дней назад в CSS от christrice
как сделать шрифт h2 тонким?
h2 шрифт тонкий CSS вес шрифта
👩💻 Технический вопрос
Спросил 11 дней назад в CSS от Jasmine
Могу ли я настроить атрибуты CSS для элемента
?
CSS элемент часов css-атрибуты Селекторы CSS цвет высота ширина
👩💻 Технический вопрос
Спросил 11 дней назад в CSS Мишель
Как сделать так, чтобы курсор менялся на курсор щелчка при наведении курсора на кнопку
CSS курсор кнопка наведите курсор
👩💻 Технический вопрос
Спросил 11 дней назад в CSS Кристрис
как сделать мои слова большими?
УС размер шрифта
👩💻 Технический вопрос
Спросил 12 дней назад в CSS Ариэль
Что такое высота строки?
высота строки CSS текст космос имущество
👩💻 Технический вопрос
Спросил 12 дней назад в CSS Юлия
Как сделать
полужирным
CSS смелый вес шрифта р элемент сорт ID
👩💻 Инструкции по коду CSS
Спросил 12 дней назад в CSS by Heather
при разрешении менее 768px выравнивание по центру div
CSS медиа-запрос выравнивание Адаптивный дизайн
👩💻 Технический вопрос
Спросил 12 дней назад в CSS Нил
как сделать, чтобы мой заголовок шел только поверх содержимого при прокрутке заголовка
положение фиксированное прокрутка HTML КСС
👩💻 Технический вопрос
Спросил 12 дней назад в CSS Аманда
как развернуть кнопку в список
кнопка развернуть кнопка список JavaScript CSS HTML
👩💻 Технический вопрос
Спросил 12 дней назад в CSS by Quinnie
Как изменить ориентацию моего фонового изображения?
фоновое изображение фоновое положение КСС
👩💻 Технический вопрос
Спросил 12 дней назад в CSS от Aneeah
как сделать овальную кнопку
HTML CSS Овальная кнопка
👩💻 Технический вопрос
Спросил 12 дней назад в CSS Джози
моя кнопка обрезается при просмотре моего веб-сайта на мобильном устройстве
CSS медиазапросы Отзывчивый дизайн мобильное устройство пуговица обрезанная
👩💻 Технический вопрос
Спросил 12 дней назад в CSS by Sibusisiwe
как добавить тень с помощью css
CSS коробка-тень тень стиль
👩💻 Технический вопрос
Спросил 12 дней назад в CSS от Raquel
Мой CSS не работает с h2 или h3
HTML CSS h2 h3 тег ссылки размер шрифта вес шрифта цвет
Просмотрите вопросы по кодированию по темам: HTML CSS JavaScript Код ВС Питон Реагировать Начальная загрузка Попутный ветер Джава PHP Node.
js Рубин Идти .NET
Как настроить стиль списка для каждого элемента с помощью CSS
Список является одним из наиболее распространенных элементов дизайна. Это полезно не только для целевых страниц, но часто используется в статьях и сообщениях в блогах, чтобы сделать контент более понятным. А в CSS списки известны как
- и
- Это
- и
- неупорядоченный список
- Это
- упорядоченный список
- №1
- №2
- — неупорядоченные и упорядоченные. А вот пример того, что оба […]
Обновлено
3 мин Чтение
| Раскрытие информации для читателей Раскрытие информации: Наш контент поддерживается читателями. Это означает, что если вы нажмете на некоторые из наших ссылок, мы можем получить комиссию. Список — один из самых распространенных элементов дизайна. Это полезно не только для целевых страниц, но часто используется в статьях и сообщениях в блогах, чтобы сделать контент более понятным.
А в CSS списки известны как
А вот пример того, как оба эти стиля списка выглядят по умолчанию:
неупорядоченный — ul
И соответствующий код:
<ул>
Итак, основные вещи. Однако цель этой статьи — показать вам, как настраивать стили списков как для всех элементов сразу, так и для каждого элемента в отдельности. Начнем со всех предметов сразу.
Изменение стиля для всего списка
В CSS стиль списков может быть выполнен с помощью сокращенного свойства list-style . С помощью этого свойства вы можете изменить внешний вид списка, добавив собственный стиль (например, эмодзи), изменив стиль списка на изображение (статическое или GIF) и изменив положение списка.
Для полной справки посетите следующие страницы MDN:
- list-style-position
- list-style-image
- list-style-type
Итак, следующий шаг — поместить все это в упражняться. Давайте сделаем еще один упорядоченный и неупорядоченный список, но на этот раз с пользовательскими смайликами в качестве стиля списка.
неупорядоченный — ul
- Этот список
- с использованием смайликов
- Skull
заказанный — ol
- И этот список
- с использованием смайлика
- Инь-Ян
А вот код для этой демонстрации:
ul.skull-emoji {
стиль списка: "\1F480"; /* Юникод для черепа */
}
ol.balance-emoji {
стиль списка: "\262F"; /* Юникод для Инь и Ян */
}
/* вы также можете применить дополнение к каждому отдельному списку, пометив элементы списка ( Этот метод работает с глифами, Unicode, напрямую импортированными смайликами и изображениями.
Он отлично работает, напрямую связываясь с изображениями или предоставляя строку в кодировке base64.
Как видите, с ним очень легко работать. Итак, давайте перейдем к изучению того, как использовать тот же самый метод, но каждый элемент в списке имеет индивидуальный стиль.
Изменение стиля для каждого элемента в списке отдельно
Чтобы применить пользовательский стиль к каждому отдельному элементу в списке, мы будем использовать CSS-свойство @counter-style . Есть много переменных, которые поддерживает это свойство (MDN покрывает их все), но для этого конкретного варианта использования нас интересуют система , символы и суффикс .
- система — позволяет контролировать способ отображения символов списка.
- символов — позволяет указать пользовательские значки/изображения/и т. д. для использования в списке.
- суффикс — укажите суффикс, который будет добавляться после символа.
А вот пример кода:
@counter-style custom-list {
система: фиксированная; /* также поддерживает циклические, аддитивные, символьные и т. д. */
символы: "\1F37F" "\1F363" "\1F368";
суффикс: «»»; /* это поле можно оставить пустым, если вы не хотите ничего добавлять */
}
ул, ул {
стиль списка: пользовательский список;
} Итак, если мы применим это к нашему новому списку, он будет выглядеть так:
- первый элемент
- второй элемент
- третий элемент
- четвертый элемент
Как видите, все работает, как задумано. Три смайлика используются индивидуально для каждого элемента в списке. Однако четвертый элемент не имеет смайликов, а вместо этого показывает число. Это потому, что мы установили систему : fixed; Спецификация .
Если мы пойдем дальше и изменить с фиксированный на циклический , тогда список будет выглядеть следующим образом:
- первый элемент
- второй элемент
- третий элемент
- четвертый элемент
Потрясающе! Как только в нашей спецификации @counter-style закончатся символы, она просто повторно использует первый символ в циклическом (повторяющемся) режиме.