子弹从哪里来<li>元素？
我目前的理解是，不同的HTML元素在function上被它们的默认CSS样式，语义分开。
使用自定义的CSS，你可以（不可避免地）使任何HTML元素像任何其他行为。
如果这是正确的，我唯一不能说明的是<li>元素上的项目符号。 什么CSS导致他们？ 你怎么能把它添加到其他元素？
请注意未来的读者：我最近学习HTML元素也有不同的内容类别 。
项目符号包含在<ul>元素的填充“内”：
填充标记为绿色，边缘为橙色：
减less填充显示项目符号是“在”内填充：
举例来说，增加<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>
浏览器通常有一个“默认样式表” – 一组适用于特定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;并允许单独的列表项出现在不同的行上。
看到这个页面https://css-tricks.com/almanac/properties/l/list-style/
子弹来自ul元素。 您可以使用属性list-style-type或list-style-image来修改它们
<li>元素的圆形子弹只是浏览器的默认值。 就像它有一个默认的字体，字体大小，链接下划线（蓝色）等。为了确保您覆盖浏览器的默认值，使用一些CSS重置http://cssreset.com/ ，或引导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>
我认为最初的问题确实是“我怎样才能把子弹添加到其他元素，因为CSS可以让任何东西（比如p元素）看上去像其他东西（比如LI）。
答案似乎是，LI是一个特例，AFAIK。 可能是错的。 我尝试在<p>元素上添加<style="display: list-item; list-style-type:disc;"> ，并没有得到子弹。 （仅使用Chrome进行testing）。
实际上，您可以手动或以编程方式将项目符号（ • ）添加到每个p元素的开头，并将margin和padding设置为UL / LI块。
列表项目上的项目符号是生成内容的示例。 生成内容的其他示例包括有序列表中的数字，CSS计数器以及:before和:after伪元素。
什么CSS导致他们？
设置display: list-item元素上的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>
