我的无序列表中缺少<li>个圈子

问题描述

| 我有以下代码：

<div class=\"fp1\">
    <div class=\"col\">
      <div class=\"img\" id=\"img1\"></div>
                        <ul>
                        <li><span>Test </span></li>
                        <li><span>Test </span></li>        
                        <li><span>Test </span></li>
                        </ul>
      </div>
</div>

.fp1 .row   { overflow: hidden;  }
.fp1 .img   { display: inline-block; float: left; width:105px; height:80px; margin:25px 0 10px 0;
    background: yellow; no-repeat scroll 0 0 transparent; }

.fp1 .col   { float: left; width:50%; margin:0px; }
.fp1 .col ul      { margin:15px 20px 0 0; padding-left: 25px; font-size: 1.2em}
.fp1 .col ul span { color:#222; font-size: 0.85em; }
.fp1 .col ul li   { line-height:15px; }

我制造了一个小提琴 我不明白的是为什么为什么应该在“ li”左侧出现的小圆圈不见了？ 任何帮助，将不胜感激     

解决方法

        您的问题是jsfiddle.net自动包含一个包含以下内容的重置样式表（

normalize.css

）：

ol,ul {
    list-style:none;
}

您会在边栏中看到一个“标准化CSS”复选框，取消选中该复选框将不会插入

normalize.css

。例如：   http://jsfiddle.net/ambiguous/HQJhe/10/ 那个小提琴就是您自己的，没有选中该复选框。     ,        您应该在此处遵循的调试技术是尽可能简化代码。问题将消失，或者您只剩下一小段代码，而某人将很容易发现问题 我去了您的JSFiddle，开始一次删除一行CSS。那没有解决问题。然后，我开始删除HTML。最终我只剩下这个：

<ul><li>Why is there no circle?</li></ul>

我的结论是，JSFiddle具有一些奇怪的样式表，这些样式表已应用于您的代码并消除了圆圈。谢谢“ mu太短了”，因为它弄清楚了什么样式表以及如何将其关闭。但是我仍然决定发布此内容，因为我认为您可以从学习这种调试技术中受益。     ,        只需在下面使用此代码：

li style=\"display: list-item; list-style: none\"