横並びのリストが・・・

質問

リストでテキストを横並びにしたいのですが、IEの表示の場合のみ一番右端のテキストが縦書きになってしまいます。解消するにはどうすれば良いでしょうか？

※IEの文字サイズを小にした場合のみ、他の文字サイズの場合はきちんと端で改行し正しくおさまります。

<STYLE type="text/css">
<!--
div{width:910px;}
ul{margin:0; padding:0; font-size:70%; padding:0 10px 0 0;}
li{list-style:none; border-right:solid 1px #ddd; float:left; padding-right:10px; margin:5px 0 5px 10px; height:10px;}
-->
</STYLE>

<div>
<p>
<ul>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
<li>あああああ</li>
</ul>
</p>
</div>

回答No.3

yambejp · ベストアンサー

liに以下を付加するだけでいけませんか？

white-space:nowrap;

お礼

ありがとうございます。無事に解決いたしました＾＾

回答No.2

po-pe-tian

floatプロパティを使用する際には、widthプロパティで幅を指定した法がいいですよ。
例えば、"あああああ"のように５文字しか入らないのであれば、
li{width:6em; list-style:none; border-right:solid 1px #ddd; float:left; padding-right:10px; margin:5px 0 5px 10px; height:10px;}
のような感じで。
文字をセンタリングしたいのなら
text-align:center;
も付け加えて。

後、p要素にはブロックレベル要素を入れることができないので、div要素の直下にul要素を入れましょう（p要素は削除しましょう）。

お礼

ありがとうございます。p要素をイージーミスで入れてしまっておりました。（ついついクセで…）
問題解決いたしました＾＾本当に助かりました。

回答No.1

reverie013

float:left;じゃ無く、liを
display:inline;にしてみては？

私は同様の問題を上記で解消しました。

お礼

ありがとうございます。試したところ横並びに関しては解消されましたが、その他のマージンやパディングなどが無視されてしまいました。
別の方のアドバイスで解決いたしました。お忙しい中本当にありがとうございました。