Ответ 1

Пули содержат "внутри" прокладку элемента <ul>:

Отступы отмечены зеленым, а маржа оранжевой:

Уменьшение отступов показывает, что пули "внутри" этого дополнения:

Увеличение поля <ul>, например, сдвигает его вправо.

Свойство list-style управляет самими пулями. Установка его на none скроет их. Вам нужно будет установить margin и padding на 0, если вы хотите также избавиться от отступа.

ul
{
    list-style: none;
}

Если вы хотите избавиться от всех полей /paddings и пунктов маркера, используйте это:

ul
{
    list-style: none;
    margin: 0;
    padding: 0;
}

Конечно, вы можете также применить маркеры к другим элементам управления HTML:

div
{
    padding-left: 40px;
}
a
{
    display: list-item;
    list-style: disc;
}

<div>
    <a href="#">Item #1</a>
    <a href="#">Item #2</a>
    <a href="#">Item #3</a>
    <a href="#">Item #4</a>
</div>

Ответ 2

Браузеры обычно имеют "стиль стилей по умолчанию" и набор стилей CSS, применяемых к определенным элементам HTML. Взгляните на стили Firefox по умолчанию, стили Chrome по умолчанию, и стили по умолчанию IE.

Обычно тег <ul> имеет следующие стили CSS по умолчанию:

ul {
  display: block;
  list-style-type: disc;
  margin-before: 1em; /* equivalent to margin-top in most languages */
  margin-after: 1em;  /* equivalent to margin-bottom in most languages */
  margin-start: 0px;  /* equivalent to margin-left in LTR */
  margin-end: 0px;    /* equivalent to margin-right in LTR */
  padding-start: 40px;/* equivalent to padding-left in LTR*/
}

• list-style-type: disc вызывает значок диска рядом с элементом.
• list-style-position и list-style-image не установлены. Их значения по умолчанию outside и none, соответственно. Это означает, что значок disc, указанный выше, появится слева от элемента li (на большинстве языков) и не будет вмешиваться в окно отображения li.
• Настройки margin и padding правильно размещают контент.

Тег <li>:

li {
  display: list-item;
}

• display: list-item похож на display: block; и позволяет отдельным отдельным элементам появляться на разных строках.

Ответ 3

Смотрите эту страницу https://css-tricks.com/almanac/properties/l/list-style/

Пули поступают из элементов ul. Вы можете изменить их, используя свойства list-style-type или list-style-image

Ответ 4

Круглые маркеры для элементов <li> - это только браузер по умолчанию. Так же, как и шрифт по умолчанию, шрифт, подчеркивание для ссылок (синий) и т.д. Чтобы убедиться, что вы перезаписываете настройки браузера по умолчанию, используйте некоторые css reset http://cssreset.com/ или bootstrap css.

Стиль для <li> определяется <ul> или <ol>, окружающим его. например

ul.circle {list-style-type: circle;}
ul.square {list-style-type: square;}
ol.upper-roman {list-style-type: upper-roman;}
ol.lower-alpha {list-style-type: lower-alpha;} 
ul.image{ list-style-image: url("//cdn.sstatic.net/stackoverflow/img/favicon.ico?v=6cd6089ee7f6");} 
ul.singleline { display:flex; list-style:none; } // css3 only

<ul class="circle">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
<ul class="square">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
<ol class="upper-roman">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ol>
<ol class="lower-alpha">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ol>
<ul class="image">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
<ul class="singleline">
    <li>One </li>
    <li>Two </li>
    <li>Three </li>
</ul>

Ответ 5

Я думаю, что исходный вопрос на самом деле был: "Как я могу добавить пули к ДРУГИМ элементам, поскольку CSS, предположительно, позволяет вам что-либо стилировать (например, p-элементы) как что-то другое (например, LI).

Ответ кажется, что LI - особый случай, AFAIK. Может быть, неправильно. Я попробовал добавить <style="display: list-item; list-style-type:disc;"> в <p> элементы и не получил пули. (Протестировано только с помощью Chrome).

Фактически вы можете добавлять символы пули (•) вручную или программно к началу каждого p-элемента и, как я полагаю, задавать поля и дополнения как UL/LI.

Ответ 6

Пули на элементах списка являются примером сгенерированного контента. Другие примеры сгенерированного контента включают числа в упорядоченных списках, счетчики CSS и псевдоэлементы :before и :after.

Что CSS вызывает их?

Настройка display: list-item на элементе будет отображать маркеры. Вы можете изменить внешний вид и положение.

Как вы можете добавить это к другим элементам?

См. примеры ниже:

.mylist.type1 > span {
  display: list-item;
  /* inside: the marker is placed inside the element box before its content */
  list-style-position: inside;
}
.mylist.type2 > span {
  display: list-item;
  /* outside (default): the marker is placed outside the element box towards left */
  /* by the way you are not restricted to just bullets */
  list-style-type: lower-roman;
}
.mylist.type2 {
  /* add some room on left for bullets positioned outside */
  padding-left: 2em;
}

<div class="mylist type1">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>
<hr>
<div class="mylist type2">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>