Missing <li> circles in my unordered list
I have the following code:
<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; }
I created a fiddle
What I don't understand is why are the small circles that sho开发者_如何学JAVAuld appear to the left of the "li" missing?
Any help would be appreciated
Your problem is that jsfiddle.net automatically includes a reset stylesheet (normalize.css
) that includes this:
ol,ul {
list-style:none;
}
You'll see a "Normalized CSS" checkbox in the sidebar, uncheck that and normalize.css
won't be pulled in; for example:
http://jsfiddle.net/ambiguous/HQJhe/10/
That fiddle is just yours with the checkbox unchecked.
The debugging technique you should follow here is to simplify your code as much as possible. Either the problem will go away, or you will be left with a few tiny lines of code and someone will be easily able to spot the problem
I went to your JSFiddle and started removing lines of CSS one at a time. That didn't solve the problem. Then I started removing HTML. Eventually I was down to just this:
<ul><li>Why is there no circle?</li></ul>
My conclusion is that JSFiddle had some weird stylesheet that was applying to your code and removing the circle. Thank you to "mu is too short" for figuring out exactly what stylesheet and how to turn it off. But I still decided to post this because I think you could benefit from learning this debugging technique.
just use this code below:
li style="display: list-item; list-style: none"
精彩评论