子弹从<li>元素哪里来？

Question 1

我目前的理解是，通过默认的CSS样式（不包括语义）将不同的HTML元素的功能分开。

使用自定义CSS，您可以（不可避免地）使任何HTML元素的行为都与其他元素相同。

如果那是正确的话，我唯一不能解释的是<li>元素上的项目符号。CSS是由什么引起的？您如何将其添加到其他元素？

将来的读者注意：我最近了解到HTML元素的内容类别也有所不同。

Question 2

项目符号包含在<ul>元素的“内部” ：

填充标记为绿色，边距标记为橙色：

减少填充量表明子弹在该填充量“内”：

<ul>例如，增加的边距将其向右移动。

该list-style酒店自行控制子弹。设置为none将隐藏它们。0如果您也想摆脱缩进，则需要设置边距和填充为。

ul
{
    list-style: none;
}

如果要摆脱所有边距/填充和项目符号点，请使用以下命令：

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>

展开摘要

Question 3

浏览器通常具有“默认样式表”，即一组应用于特定HTML元素的CSS样式。看一下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;并允许单独的列表项出现在不同的行上。

Question 4

参见本页https://css-tricks.com/almanac/properties/l/list-style/

项目符号来自ul元素。您可以使用属性list-style-type或list-style-image修改它们

Question 5

<li>元素的圆形项目符号只是浏览器的默认值。就像它具有默认字体，字体大小，链接的下划线（蓝色）等一样。要确保覆盖浏览器的默认设置，请使用一些CSS重置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>

展开摘要

Question 6

我认为最初的问题确实是，“我应该如何在其他元素中添加项目符号，因为CSS应该可以让您将任何样式（如p元素）设置为其他样式（如LI）。

答案似乎是，LI是AFAIK的特例。可能是错误的。我尝试添加<style="display: list-item; list-style-type:disc;">的<p>元素，并没有得到子弹。（仅通过Chrome测试）。

实际上，您可以•手动或以编程方式在每个p元素的开头添加项目符号字符（），并设置边距和填充以看起来像UL / LI块。

Question 7

列表项上的项目符号是生成的内容的示例。生成内容的其他示例包括有序列表中的数字，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>

展开摘要

为了进行更精确的控制，我建议您使用伪元素（如果要计数，则使用CSS计数器）。