<li>の横並びで、<span>のところで改行

質問

<li>をfloatで横並びにした場合、IE7のみ、<span>のところで改行されてしまい、最後の部分だけ以下のようになります。

ddd
( xx
x )

IE8やそれ以外のブラウザは<li>のところで改行され、以下のようになります。
aaa ( xxx ) bbb ( xxx ) ccc( xxx )
ddd ( xxx )

どのようにすれば、IE7も<li>のところで改行され他と同じようになりますか。

実際にはaaa,bbb,xxxの文字などはもっと長いものでたまたま画面右端ぎりぎりにdddまで表示され</span>が区切りになって( xxx )の部分がddd下部に縦に3段くらいで表示されます。
IE8や、他のブラウザは、ddd ( xxx ) がセットで画面に収まらないので、<li>でおりかえされており、このようになってほしいのですが。

よろしくお願い致します。

<ul class="list">
<li><a href="a.html"><span style="color: #cccc99">aaa</span> ( xxx )</a></li>
<li><a href="b.html"><span style="color: #cccc99">bbb</span> ( xxx )</a></li>
<li><a href="c.html"><span style="color: #cccc99">ccc</span> ( xxx )</a></li>
<li><a href="d.html"><span style="color: #cccc99">ddd</span> ( xxx )</a></li>
</ul><div style="clear: left;"></div>

ul.list{
list-style:none;
width:100%;
margin: 0 0 .8em 0;
padding: 0;
}
ul.list li {
float:left;
display: inline;
margin-right:.7em;
}

回答No.3

naokita · ベストアンサー

改行禁止で対応。

ul.list li a{
white-space: nowrap;
}

お礼

おかげさまで解決致しました。
ありがとうございました。

回答No.2

ORUKA1951

min-widthが、実際の文字列幅より小さかったら意味ないですよ。

お礼

white-space: nowrap;　で解決しました。
ご親切にご回答ありがとうございました。

回答No.1

ORUKA1951

floatさせるなら、それはblockでしょうね。
このソースではspanではなく半角スペースが改行させていると考えるべきです。
HTMLの仕様で半角スペースは単語境界として認識される。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
PRE要素を除くすべてのHTMLの要素にとっては、空白類は「語」を分離するものである。 (ここで言う「語」は、「空白類でない文字の列」を意味する。) テキストを整形する際、ユーザエージェントはどれが「語」であるかを認識し、特定言語(用字系)及び出力メディアでの制約に従って整えていく必要がある。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Paragraphs, Lines, and Phrases (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#h-9.1 )］より

　IE7以前は、ブロックの寸法の算出方法が標準と異なっていたため、狭いブロックと判断し、その内では上記空白文字で折り返される。
　IE5ではmin-widthは認識できないが、IE6以降ならmin-widthで制御しましょう。

<!--
ul.list{
list-style:none;
width:100%;
margin: 0 0 .8em 0;
padding: 0;
}
ul.list li {
float:left;
display: block;
margin-right:0.7em;
min-width:5em;
}
-->

補足

ご回答ありがとうございました。
display: block;　min-width:5em;　を追加してみましたが、特に変化はありませんでした。半角もなくしてみましたが、やはり同じで( xxx ）の部分で改行されます。
他に考えられる理由がお分かりでしたらご教授お願い致します。