List style position css: list-style-position — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

CSS list-style-position

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Полный CSS Справочник Дальше ❯


Пример

Укажите положение маркеров элементов списка:

ul.a {
    list-style-position: outside;
}

ul.b {
    list-style-position: inside;
}

Определение и использование

Свойство list-style-position указывает положение маркеров элементов списка (маркеров).

list-style-position: outside; означает, что маркированные точки будут находиться за пределами элемента списка. Начало каждой строки элемента списка будет выровнено по вертикали:

  • Кофе- сваренный напиток, приготовленный из жареных кофейных зерен…
  • Чай
  • Кока-Кола

list-style-position: inside; означает, что маркированные точки будут находиться внутри элемента списка. Поскольку он является частью элемента списка, он будет частью текста и нажимаем текст в начале:

  • Кофе- сваренный напиток, приготовленный из жареных кофейных зерен. ..
  • Чай
  • Кока-Кола

Значение по умолчанию:outside
Inherited:yes
Animatable:no. Читайте о animatable
Version:CSS1
Синтаксис JavaScript: object.style.listStylePosition=»inside»

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
list-style-position1.04.01.01.03.5

Синтаксис CSS

list-style-position: inside|outside|initial|inherit;

Значения свойств

ЗначениеОписание
insideМаркированные точки будут находиться внутри элемента списка
outsideМаркированные точки будут находиться за пределами элемента списка. Это значение по умолчанию
initialПрисваивает этому свойству значение по умолчанию. (Читайте о initial)
inheritНаследует это свойство из родительского элемента. (Читайте о inherit)

Похожие страницы

CSS Справочник: CSS List

CSS Справка: list-style Свойство

HTML DOM Справочник: listStylePosition Свойство

❮ Назад Полный CSS Справочник Дальше ❯

Популярное CSS

css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css

выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы

Copyright 2018-2020 HTML5CSS.ru

Правила и Условия Политика конфиденциальности О нас Контакты

css властивість list-style-position

  • Головна
  • css
  • властивості
  • list-style-position

Властивість list-style-position визначає, де буде розміщуватися мітка, всередині списку, чи поза його межами.

Для цієї властивості існує два значення:

list-style-position можна використовувати в будь-якому елементі списку. Елемент списку — це будь-який елемент, у якого display встановлено як list-item або inline-list-item, який є нащадком елементів <ol> i <ul>.

Нотатка:

Між браузерами існує різниця щодо поведінки, коли блоковий елемент розміщений на спочатку в елементі списку, оголошеному як list-style-position: inside. Chrome і Safari поміщають цей елемент у той самий рядок, що й маркер, тоді як Firefox, Internet Explorer та Opera поміщають його в наступний рядок.

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

list-style-position: inside|outside|initial|inherit;

Властивість list-style-position може отримувати 4 значення:

inside

Мітка є частиною текстового блоку і відображається в середині елемента.

outside

Текст вирівнюється по лівому краю, а мітка буде за межами блоку. Без задання.

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивостей від свого батьківського елемента

Значення без задання:outside
Наслідує:Так
Анімується:Ні
JavaScript синтаксис:object.style.listStylePosition=»inside»

Переглядачі

  • Стаціонарні переглядачі
  • Мобільні переглядачі
Переглядач
list-style-position

1. 0

4.0

1.0

1.0

7.0

12.0

Переглядач
list-style-position

1.0

1.0

1.0

Приклади

  • Приклад 1
  • Приклад 2
  • Приклад 3

Значення у дії

Приклад використання
Маркер списку повинен з’явитися всередині (призводить до додаткових відступів)
ul { 


  list-style-position: inside; 


}
Додаткові посилання
list-style
counter-reset
counter-increment
list-style-type
list-style-image
 Свойство CSS-стиля-позиции 
 ❮ Назад
Полное руководство по CSS
Далее ❯
 
 Пример 
 Укажите положение маркеров элементов списка:
 ul. a { 
   положение в стиле списка: снаружи; 
 }
 ул.б { 
 позиция стиля списка: внутри; 
 }
 Попробуйте сами »
 Определение и использование 
 Свойство  list-style-position  задает позицию маркеров элементов списка
(отверстия от пуль).
  позиция в стиле списка: снаружи;  означает, что маркеры будут снаружи
элемент списка. Начало каждой строки элемента списка будет выровнено по вертикали:
  
  •  Кофе —
Заварной напиток, приготовленный из обжаренных кофейных зерен…
  •  Чай
  •  Кока-кола
  позиция в стиле списка: внутри;  означает, что маркеры будут внутри
элемент списка. Поскольку он является частью элемента списка, он будет частью текста и
нажмите текст в начале:
  •  Кофе —
Заварной напиток, приготовленный из обжаренных кофейных зерен…
  •  Чай
  •  Кока-кола
 Показать демо ❯
 Значение по умолчанию: снаружи
 Унаследовано: да
 Анимация: нет. Читать про  анимированный 
 Версия: CSS1
 Синтаксис JavaScript:
 
  объект  .style.listStylePosition=»внутри»
Попытайся
 Поддержка браузера 
 Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
 Собственность
 позиция стиля списка 1,0 4,0 1,0 1,0 3,5
 Синтаксис CSS 
 стиль-позиция-списка: внутри|снаружи|начальный|наследовать;
 Значения свойств 
 Значение Описание Демо
 внутри Пункты списка будут внутри элемента списка Демонстрация ❯
 снаружи Маркеры будут находиться за пределами элемента списка.
  Это по умолчанию		 Демонстрация ❯
 начальный Устанавливает для этого свойства значение по умолчанию. Читать про  начальный 
 унаследовать Наследует это свойство от родительского элемента. Читать о  унаследовать 
 Связанные страницы 
 Учебник по CSS: Список CSS
 Справочник по CSS: свойство list-style
 Справочник по HTML DOM: свойство listStylePosition
 ❮ Предыдущий
Полное руководство по CSS
Следующий ❯
 
 ВЫБОР ЦВЕТА 
 Лучшие учебники 
 Учебное пособие по HTML 
 Учебное пособие по CSS 
 Учебное пособие по JavaScript 
 Учебное пособие 
 Учебное пособие по SQL 
 Учебное пособие по Python 
 Учебное пособие по W3.CSS 
 Учебное пособие по Bootstrap 
 Учебное пособие по PHP 
 Учебное пособие по Java 
 Учебное пособие по C++ 
 
 Учебное пособие по jQuery 
 9008 9008
Справочник по HTML 
 Справочник по CSS 
 Справочник по JavaScript 
 Справочник по SQL 
 Справочник по Python 
 Справочник по W3. CSS 
 Справочник по Bootstrap 
 Справочник по PHP 
 Цвета HTML 
 Справочник по Java 
 Справочник по Angular 
 Справочник по jQuery 
 Лучшие примеры 
 Примеры HTML 
 Примеры CSS 
 Примеры JavaScript 
 Примеры инструкций 
 Примеры SQL 
 Примеры Python 
 Примеры W3.CSS 
 Примеры Bootstrap 
 Примеры PHP 
 Примеры Java 
 Примеры XML 
 Примеры jQuery 
 ФОРУМ |
 О
 W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
 Copyright 1999-2022 Refsnes Data. Все права защищены. 
 W3Schools работает на основе W3.CSS.
 CSS: свойство позиции стиля списка 
 В этом учебнике по CSS объясняется, как использовать свойство CSS под названием  позиция стиля списка  с синтаксисом и примерами.
 Описание 
 Свойство CSS list-style-position определяет положение маркера элемента списка в основном блоке.
 Синтаксис 
 Синтаксис CSS-свойства list-style-position:
 list-style-position: value; 
 Параметры или аргументы 
 значение
 Внешний вид элемента списка. Это может быть одно из следующих значений:
.
 Значение Описание
 внутри Блок-маркер находится внутри блока основного блока 
 ul { list-style-position: inside; }
 снаружи Поле маркера находится за пределами основного блока (по умолчанию) 
 ul { позиция в стиле списка: снаружи; }
 унаследовать Элемент унаследует положение стиля списка от своего родительского элемента 
 ol { положение стиля списка: наследование; }
 Примечание 
  •  Свойство list-style-position можно применять к тегам
      ,
         или
      • .
      •  Позиция-стиля-списка применяется к элементам с отображением: элемент-списка.
      •  Если свойство list-style-position не указано, по умолчанию используется значение 9.0070 снаружи  .
      •  См. также свойства list-style, list-style-image и list-style-type.
       Совместимость с браузерами 
       Свойство CSS list-style-position имеет базовую поддержку в следующих браузерах:
      •  Chrome
      •  Firefox (Геккон)
      •  Internet Explorer (IE)
      •  Опера
      •  Сафари (веб-кит)
       Пример 
       Мы обсудим свойство list-style-position ниже, исследуя примеры использования этого свойства в CSS.
       Снаружи 
       Давайте посмотрим на пример CSS-стиля-позиции, где мы установили для позиции стиля списка значение  снаружи  .
       HTML-код будет выглядеть следующим образом:
       
        
  
      1. TechOnTheNet.com предоставляет полезные справочные материалы, инструкции и часто задаваемые вопросы с 2003 года. 
        2. 
  
      2. На сайте CheckYourMath.com есть ответы на ваши повседневные вопросы по математике.
        3. 
  
      3. BigActivities.com предназначен для родителей, учителей и опекунов, чтобы помочь детям освоить основы или просто развлечься!
        4. 
 
       CSS будет выглядеть так:
       ol { list-style-position: снаружи; фон: светло-зеленый; } 
       Упорядоченный список будет выглядеть так:
       В этом примере позиции стиля списка CSS мы установили позицию стиля списка на  вне  . Это приводит к тому, что маркеры элементов списка (например, нумерация) отображаются с меньшим отступом, и когда текст элемента списка переносится, текст продолжает оставаться с большим отступом, чем нумерация.
       Внутри 
       Далее, давайте посмотрим на пример позиции стиля списка CSS, где мы устанавливаем позицию стиля списка на  внутри .
       HTML-код будет выглядеть следующим образом:
       
      1. TechOnTheNet.com предоставляет полезные справочные материалы, инструкции и часто задаваемые вопросы с 2003 года.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *