6

次のコードがあります。

<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」の左側に表示されるはずの小さな円が見つからないのはなぜですか?

どんな助けでもいただければ幸いです

4

3 に答える 3

18

あなたの問題は、jsfiddle.net に、これを含むリセット スタイルシート ( normalize.css) が自動的に含まれることです。

ol,ul {
    list-style:none;
}

サイドバーに「Normalized CSS」チェックボックスが表示されます。チェックを外すと取り込まれnormalize.cssません。例えば：

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

そのフィドルは、チェックボックスがオフになっているあなたのものです。

于 2011-06-04T07:04:40.493 に答える
0

ここで従うべきデバッグ手法は、コードをできるだけ単純化することです。問題がなくなるか、数行の小さなコードが残り、誰かが問題を簡単に発見できるようになります。

私はあなたの JSFiddle に行き、一度に 1 行ずつ CSS の行を削除し始めました。それは問題を解決しませんでした。次に、HTML の削除を開始しました。最終的に私はこれだけになりました：

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

私の結論は、JSFiddle には、コードに適用されて円を削除する奇妙なスタイルシートがあったということです。スタイルシートとそれをオフにする方法を正確に理解してくれた「mu is too short」に感謝します。しかし、このデバッグ手法を学ぶことで利益が得られると思うので、これを投稿することにしました。

于 2011-06-04T07:08:42.870 に答える