dポイントプレゼントキャンペーン実施中!

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

A 回答 (3件)

改行禁止で対応。



ul.list li a{
white-space: nowrap;
}
    • good
    • 1
この回答へのお礼

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

お礼日時:2011/03/16 14:31

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

    • good
    • 0
この回答へのお礼

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

お礼日時:2011/03/16 14:30

floatさせるなら、それはblockでしょうね。


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

 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 )の部分で改行されます。
他に考えられる理由がお分かりでしたらご教授お願い致します。

補足日時:2011/03/14 12:54
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!