リストでテキストを横並びにしたいのですが、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>

このQ&Aに関連する最新のQ&A

A 回答 (3件)

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



white-space:nowrap;
    • good
    • 0
この回答へのお礼

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

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

floatプロパティを使用する際には、widthプロパティで幅を指定した法がいいですよ。


例えば、"あああああ"のように5文字しか入らないのであれば、
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要素は削除しましょう)。
    • good
    • 0
この回答へのお礼

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

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

float:left;じゃ無く、liを


display:inline;にしてみては?

私は同様の問題を上記で解消しました。
    • good
    • 0
この回答へのお礼

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

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

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


人気Q&Aランキング

おすすめ情報