开发者

Missing <li> circles in my unordered list

开发者 https://www.devze.com 2023-03-10 14:22 出处:网络
I have the following code: <div class=\"fp1\"> <div class=\"col\"> <div class=\"img\" id=\"img1\"></div>

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"  
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号