横並びのリストが・・・

リストでテキストを横並びにしたいのですが、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.1 回答者： reverie013 回答日時： 2009/05/27 10:26

float:left;じゃ無く、liを

display:inline;にしてみては？

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

この回答へのお礼

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

お礼日時：2009/05/27 12:54

No.2 回答者： po-pe-tian 回答日時： 2009/05/27 10:50

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要素をイージーミスで入れてしまっておりました。（ついついクセで…）
問題解決いたしました＾＾本当に助かりました。

お礼日時：2009/05/27 12:53

No.3 ベストアンサー 回答者： yambejp 回答日時： 2009/05/27 12:31

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

white-space:nowrap;

この回答へのお礼

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

お礼日時：2009/05/27 12:51