Question

我有以下代码：

<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; }

我创建了fiddle

我不明白为什么应该出现在“li”左侧的小圆圈丢失？

任何帮助将不胜感激

Answer 1

你的问题是jsfiddle.net自动包含一个包含这个的重置样式表（normalize.css）：

ol,ul {
    list-style:none;
}

您会在侧边栏中看到“规范化的CSS”复选框，取消选中该框并且normalize.css不会被拉入;例如：

http://jsfiddle.net/ambiguous/HQJhe/10/

这个小提琴只是你的选项，未选中复选框。

Answer 2

您应该遵循的调试技术是尽可能简化代码。问题会消失，或者你会留下一些细小的代码，有人会很容易发现问题

我去了你的JSFiddle并开始一次删除一行CSS。那并没有解决问题。然后我开始删除HTML。最终我还是这样：

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

我的结论是JSFiddle有一些奇怪的样式表适用于你的代码并删除了圆圈。感谢“mu太短”，无法确定哪些样式表以及如何将其关闭。但我仍然决定发布这个，因为我认为你可以从学习这种调试技术中受益。

Answer 3

只需在下面使用此代码：

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

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

3 个答案: