子弹来自<li>元素？

Question

我目前的理解是,不同的HTML元素在功能上由默认的CSS样式,语义除外.

使用自定义CSS,您可以(不可避免地)使任何HTML元素的行为与其他HTML元素一样.

如果这是正确的,我唯一无法解释的是<li>元素上的子弹.什么CSS导致他们？如何将其添加到其他元素？

---

未来读者请注意:我最近学习的HTML元素也因内容类别而异.

Answer 1

子弹包含在<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>

Answer 2

浏览器通常具有"默认样式表" - 一组应用于特定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;并允许单独的列表项出现在不同的行上.

Answer 3

查看此页面https://css-tricks.com/almanac/properties/l/list-style/

子弹来自ul元素.您可以使用属性list-style-type或list-style-image修改它们

Answer 4

<li>元素的圆形项目符号只是浏览器的默认值.就像它有一个默认字体,fontsize,链接下划线(蓝色)等.要确保覆盖浏览器默认值,请使用一些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>