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

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

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

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

No.3 ベストアンサー 回答者： font_color 回答日時： 2013/01/07 22:09

#1です。

修正されたスタイルで確認しましたがIE、Firefoxともに崩れていないようです。

なにか他のスタイルが影響しているかも知れません。

IEならF12開発者ツールで、FirefoxでしたらFirebugなどで、
どのスタイルが影響しているか確認してみてください。

この回答へのお礼

ありがとうございました！

謎のままですが一度違うスタイルも見てみます。

お礼日時：2013/01/09 12:07

No.2 回答者： font_color 回答日時： 2013/01/07 01:50

#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)くらいトップが途中からズレてしまいます・・・これはなんなんですかね。。。

お礼日時：2013/01/07 10:15

No.1 回答者： font_color 回答日時： 2013/01/06 22:11

はじめまして。

htmlもcssもないので憶測でしかないですが・・。

floatで横並びにしているのなら
ul,liともに幅を指定していると思いますが
liにpaddingを入れた分liの幅が膨らみ
カラム落ちをしている状態かなと思います。

例えば

ulの幅を400px
liの幅を100px
とした時floatさせたら
100×4＝400となるわけですが

liにpaddingを足した分liの幅は膨らんでしまうので
liの幅が100+20pxとなり
120×4=480px

つまり親要素ulの幅を越えたために
下に落ちたのではないでしょうか？

この回答へのお礼

解答ありがとうございます。

崩れたというよりも画像の通り2pxくらいだけ崩れた感じです。

html

<div id="nav" class="clearfix" >
<ul class="nav-inner">
<li><a href="#">送料無料</a></li>
<li><a href="#">送料無料</a></li>
<li><a href="#">送料無料</a></li>
<li><a href="#">送料無料</a></li>
<li><a href="#">送料無料</a></li>
<li><a href="#">送料無料</a></li>
</ul>
</div>

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:950px;
}

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

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

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

.nav-1 li{
float:left;
}

お礼日時：2013/01/07 00:21