<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;
}
