私の単純なケースではパディング左が機能しないのはなぜですか？

Question

私はを使用して2つの順序付けられていないリストを作成し、それぞれが<div>の中にある非常に単純なレイアウトを持っています。

<div id="main"> 
    <div id="fist-list"> 
     <ul id="colors"> 
      <li id="white">White</li> 
      <li id="green">Green</li> 
     </ul> 
    </div> 
    <div id="second-list"> 
     <ul id="numbers"> 
      <li id="one">One</li> 
      <li id="two">Two</li> 
     </ul> 
    </div> 
</div> 

li{ 
    float: left; 
    width: 30px; 
} 
#second-list{ 
    padding-left:30px; 
}

you can check my simple code here。

私はCSSを使用しようとしましたpadding-left別れ 2つのリストはお互いから30px離れていますが、私のCSSは動作しません、なぜですか？常にラインを中断しますので、あなたはレイアウトを破壊するフロートを、使用している

のdivのは、ブロックレベル要素であり、かつ：

Answer 1

た後、それは動作します

チェック。このような

：

#second-list{ 
    padding-left:30px; 
    float:left 
} 

はまだ私はそれを別の方法になるだろうが、私はあなたが達成したいかを確認する必要があります。あなたはその写真を持っていますか？

Answer 2

があり、ここでいくつかの問題があります。

は単純にそうように、フロートを削除し、divタグにインラインブロックを作る：

http://jsfiddle.net/a8dy6/12/

幸運を！あなたclearからdivで

Answer 3

書き込みoverflow:hiddenそれはchild's float

div{overflow:hidden} 
#second-list, #fist-list{float:left} 

チェックこのhttp://jsfiddle.net/sandeep/a8dy6/18/

編集理由：あなたごとに

li{clear:left;} 

チェックこのhttp://jsfiddle.net/sandeep/a8dy6/19/

以下のコメント

EDIT：

理由：あなたはclearそれがparentそうparent崩壊にfloatは、あなたが持っている要素を定義した場合、実際に#second-listはpadding

をとります。

チェックこのそうでないclear the parenthttp://jsfiddle.net/sandeep/a8dy6/22/

をしたとき。 clearの場合は、childがfloatの場合はparentです。これはあなたがまだ李

あなたは左のリストに浮くことができますでフロートをしたい場合はclear parenthttp://jsfiddle.net/sandeep/a8dy6/23/