List display item: — CSS: Cascading Style Sheets

Ключевое слово 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{display: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

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox для AndroidOpera AndroidSafari на IOSSamsung 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.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 {отображение: блок}; 
 <дел>
  
А
Б
С

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

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

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