floatすると一部、段になってしまう。

質問

いつもお世話になります。

li要素をfloat-leftしてテキストを並べたのですが、その要素を並べるだけでは崩れないのですが、padding-left:20px（添付画像状態）にすると並べたテキストの数個が段になってしまいます。
※添付の緑色の部分です。
値を大きくすればするだけどんどん段のものが増えて行きます。

これはどうすれば解消されるのでしょうか？

回答No.2

font_color

#1です。

ソースを拝見しました。
検証してみたところ、「段になる」というより
明らかなカラム落ちです。

まず
#navですが
width:950px
となっています。

これに内包される要素
#nav ulは
margin-left:115px;
width:950px;
合わせて1065px
この時点で親要素からはみ出しています。

次に#nav ulに内包される
#nav liは
width:150px;
padding-left:20px;
1つあたり170px
170×6=1020px
親要素ulからはみ出しています。

これが崩れる原因かと思います。
まずはサイズを調整してみてください。

ちなみにブラウザは何で確認されていますか？
「段になる」というところから推測するとIE7でしょうか？
IE7以下のブラウザはバグが多いです。
http://nobuko.biz/iebug-dtd/ie7-bag.html
↑この辺りを参考にしてください。

お礼

たびたびありがとうございます。

今下記にcssを変更しました。

#nav{
width:950px;
height:29px;
background-image:url(img/nav.jpg);
background-repeat:no-repeat;
}

#nav ul{
margin-left:115px;
padding-top:5px;
width:835px;
}

#nav li{
float:left;
font-size:12px;
padding-left:20px;
}

#nav li a{
color:#FFF;
text-decoration:none;
}

#nav li a:hover{
color:#00F;
text-decoration:underline;
}

.nav-1 li{
float:left;
}

ie8で確認すると綺麗に横に並ぶのですが、firefoxで見るとやはり質問に添付したように少し(2px)くらいトップが途中からズレてしまいます・・・これはなんなんですかね。。。