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

Leave a Comment / Css / By /

CSS свойство list-style-position — Как создать сайт

CSS справочник

Определение и применение

CSS свойство list-style-position задает расположение маркера / цифры относительно элемента списка (располагается внутри элемента списка вместе с содержимым, либо за границей элемента списка).

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

Свойство
Chrome
Firefox
Opera
Safari
IExplorer
Edge
list-style-position1.01.03.51.04.012.0

CSS синтаксис:

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

JavaScript синтаксис:

object.style.listStylePosition = "outside"

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

ЗначениеОписание
outsideУказывает, что маркер / цифра располагается слева от текста за границей элемента списка. Это значение по умолчанию.
insideУказывает, что маркер / цифра располагается слева от текста внутри элемента вместе с содержимым. Текст смещается внутри элемента на расстояние, которое занимает маркер.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Да.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title> Пример CSS свойства list-style-position.</title>
<style> 
li {
border : 1px solid orange; /* устанавливаем сплошную границу размером 
1px оранжевого цвета для всех элементов списка*/
}
.test {
list-style-position : outside; /* указываем, что маркер располагается 
слева от текста за границей элемента списка */
background-color : khaki; /* устанавливаем цвет заднего фона */
}
. test2 {
list-style-position : inside; /* указываем, что маркер располагается 
слева от текста внутри элемента вместе с содержимым */
background-color : khaki; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<ul class = "test">
			<li>Элемент списка</li>
			<li>Элемент списка</li>
			<li>Элемент списка</li>
		</ul>
		<ul class = "test2">
			<li>Элемент списка</li>
			<li>Элемент списка</li>
			<li>Элемент списка</li>
		</ul>
	</body>
</html>

Пример использования CSS свойства list-style-position (расположение маркера).

 

CSS справочник

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться

Твитнуть

Поделиться

seodon.ru | CSS справочник — list-style-position

Опубликовано: 18. 08.2010 Последняя правка: 08.12.2015

Свойство CSS list-style-position используется для изменения положения маркеров в нумерованном и маркированном списках, устанавливая их внутри блока или за его пределами. Когда маркеры находятся вне блока списка (по умолчанию), то они всегда располагаются на некотором расстоянии от содержимого пунктов списка. Если же маркеры расположены внутри, то они становятся первыми инлайн-элементами в пунктах списка, которые, к тому же, всплываю влево. То есть содержимое этих пунктов обтекает маркеры справа.

Список с разными значениями свойства list-style-position.

Вместо list-style-position можно использовать универсальное свойство list-style.

Тип свойства

Назначение: списки.

Применяется: к тегам <OL>, <UL>,<LI> и элементам с display: list-item.

Наследуется: да.

Значения

Значением свойства list-style-position является одно из ключевых слов определяющих положение маркеров.

  • outside — маркеры вынесены за границу блока списка.
  • inside — маркеры находятся внутри элементов списка.
  • inherit — наследует значение list-style-position от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: outside.

Синтаксис

list-style-position: outside | inside | inherit

Пример CSS: использование list-style-position

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство list-style-position</title>
  <style type="text/css">
   ul {
    width: 200px; /* ширина списка */
    list-style-position: inside; /* маркеры внутри пунктов списка */
   }
  </style>
 </head>
 <body>
  <ul>
   <li>Text text text text text text text text text text</li>
   <li>Text text text text text text text text text text</li>
   <li>Text text text text text text text text text text</li>
  </ul>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS list-style-position.

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:ДаДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ЧастичноДаДаДаДаДа

Internet Explorer 6.0 и 7.0 не понимают значение inherit.

CSS | Свойство list-style-position — GeeksforGeeks

Улучшить статью

Сохранить статью

  • Последнее обновление: 02 Авг, 2022

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Свойство list-style-position в CSS указывает положение поля маркера относительно поля основного блока.

    Синтаксис: 

     позиция стиля списка: снаружи|внутри|начальный|наследовать;

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

    • снаружи: В этом значении маркер находится за пределами основного блока, т. е. маркеры будут за пределами элемента списка. Это значение по умолчанию.
    • внутри: В этом значении маркер является первым элементом среди содержимого элемента списка, т.е. маркеры будут внутри элемента списка.
    • начальный: Этот режим устанавливает для этого свойства значение по умолчанию.

    Пример:  

    html

    < html >

         < head >

             < title >CSS list-style-position Property title >

             < style >

             . geek1 {

               list-style-position: снаружи;

    }

    .geek2 {

    Список-поставка: Внутри;

    }

    Стиль >

    голова >

    < .

    CSS-List-Style-Position.0059 < h4 >list-style-position: outside; h4 >

         < ul class="geek1">

           < LI > Bubble Sort LI >

    < LI > Serge Sort LI > 8888888888888888888888888888888888888888888888888888888888888888888888888888888880059        <

    li >Insertion Sort li >

         ul >

          

         < h4 >list-style-position: inside; h4 >

         < ul class="geek2"> 83

    9        < li >Bubble Sort li >

           < li >Merge Sort li >

           < LI > Вставка сортировки

    LI >

    UL >

    99060 >

    9 >

    9 body >

    html >

    Output:

      

    Supported Browsers: The browser supported by list-style- position перечислены ниже:

    • Google Chrome 1. 0 и выше
    • Edge 12.0 и выше
    • Internet Explorer 4.0 и выше
    • Firefox 1.0 и выше
    • Opera 3.5 и выше
    • Apple Safari 1.0 и выше

    Статьи по теме

    Что нового

    Мы используем файлы cookie, чтобы обеспечить вам максимальное удобство просмотра нашего веб-сайта. Используя наш сайт, вы подтверждаете, что вы прочитали и поняли наши Политика использования файлов cookie & Политика конфиденциальности

    Позиция стиля списка CSS

    Пример <стиль> ул { цвет фона: светло-зеленый; } .вне { позиция стиля списка: снаружи; } .внутри { позиция стиля списка: внутри; }

    Вы видите разницу?

    <ул>
  • тип-стиль-списка
  • позиция стиля списка
  • изображение в стиле списка
    • <ул>
  • тип-стиль-списка
  • позиция стиля списка
  • изображение в стиле списка

    • Свойство CSS list-style-position используется для управления положением элементов списка.

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

    Элемент списка — это любой элемент, свойство display которого установлено на list-item или inline-list-item . Элементы списка — это единственные элементы, которые генерируют ::маркер псевдоэлементов.

    См. также свойства list-style , list-style-type и list-style-image .

    Синтаксис

    позиция стиля списка: внутри | снаружи

    Возможные значения

    внутри
    Указывает, что псевдоэлемент ::marker является встроенным элементом, размещенным непосредственно перед псевдоэлементом ::before в элементе списка.
    снаружи
    То же, что и с внутри , плюс свойство position маркера вычисляет маркер .

    Кроме того, все свойства CSS также принимают следующие значения ключевых слов CSS в качестве единственного компонента значения их свойства:

    начальный
    Представляет значение, указанное как начальное значение свойства.
    унаследовать
    Представляет вычисленное значение свойства родительского элемента.
    снято с охраны
    Это значение действует как inherit или initial , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительские значения, если они наследуемые, или их начальные значения, если они не наследуемые.

    Общая информация

    Исходное значение
    снаружи
    Применяется к
    Элементы списка (любой элемент с его отображением установлено значение элемент списка или встроенный элемент списка ).

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

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