Свойство CSS `list-style-position`

Свойство list-style-position CSS задаёт положение ::marker относительно элемента списка.

Попробуйте

list-style-position: inside;

list-style-position: outside;

<section class="default-example" id="default-example">
  <div>
    <p>NASA Notable Missions</p>
    <ul class="transition-all" id="example-element">
      <li>Apollo 11: First Human Landing</li>
      <li>City in Space: The International Space Station</li>
      <li>Great Observatory: The Hubble Space Telescope</li>
      <li>Everlasting Mars Rovers</li>
    </ul>
  </div>
</section>

.default-example {
  font-size: 1.2rem;
}

#example-element {
  width: 100%;
  background: #be094b;
  color: white;
}

section {
  text-align: left;
  flex-direction: column;
}

hr {
  width: 50%;
  color: lightgray;
  margin: 0.5em;
}

.note {
  font-size: 0.8rem;
}

.note a {
  color: #009e5f;
}

@counter-style space-counter {
  symbols: "\1F680" "\1F6F8" "\1F6F0" "\1F52D";
  suffix: " ";
}

Синтаксис

/* Keyword values */
list-style-position: inside;
list-style-position: outside;

/* Global values */
list-style-position: inherit;
list-style-position: initial;
list-style-position: revert;
list-style-position: revert-layer;
list-style-position: unset;

Значения

Это свойство задаётся одним из следующих ключевых слов:

inside

::marker — первый элемент содержимого элемента списка.

outside

::marker находится за пределами главного блочного контейнера. Это значение по умолчанию для list-style.

Описание

Это свойство применяется к элементам списка, то есть элементам с display: list-item;. По умолчанию к ним относятся элементы <li>. Поскольку это свойство наследуется, его можно задать родительскому элементу (обычно <ol> или <ul>), чтобы оно применялось ко всем элементам списка.

Если блочный элемент является первым дочерним элементом списка, объявленного как list-style-position: inside, то блочный элемент размещается на строке после блока маркера.

Часто удобнее использовать сокращённое свойство list-style.

Формальное определение

Формальный синтаксис

list-style-position = 
  inside |
  outside

Примеры

Задание положения элемента списка

HTML

<p>List 1</p>
<ul class="inside">
  <li>List Item 1-1</li>
  <li>List Item 1-2</li>
  <li>List Item 1-3</li>
  <li>List Item 1-4</li>
</ul>
<p>List 2</p>
<ul class="outside">
  <li>List Item 2-1</li>
  <li>List Item 2-2</li>
  <li>List Item 2-3</li>
  <li>List Item 2-4</li>
</ul>
<p>List 3</p>
<ul class="inside-img">
  <li>List Item 3-1</li>
  <li>List Item 3-2</li>
  <li>List Item 3-3</li>
  <li>List Item 3-4</li>
</ul>

CSS

.inside {
  list-style-position: inside;
  list-style-type: square;
}

.outside {
  list-style-position: outside;
  list-style-type: circle;
}

.inside-img {
  list-style-position: inside;
  list-style-image: url("star-solid.gif");
}

Результат

Спецификации

Совместимость с браузерами

См. также

• list-style сокращённое свойство
• list-style-type свойство
• list-style-image свойство
• ::marker псевдоэлемент
• Списки и счётчики CSS — модуль
• Стили счётчиков CSS — модуль