CSSを用いてリストを横並びにして、それを2行にまたがせる方法

質問

CSS を用いて、リストを横並びにしたのはいいのですが、そのリストの数が多く、2行にまたがらざるを得ません。

Firefox ですと枠内に入りきらないリストは自動的に改行して表示してくれるのですが、IE ですと入りきらないリストを右端に無理矢理表示（縦に伸びていきます）し、そのリストの次から2行目と移り変わります。

-- HTML --
<div id=content>
<ul>
<li><a href="">AAA</a></li>
<li><a href="">BBB</a></li>
<li><a href="">CCC</a></li>
<li><a href="">DDD</a></li>
<li><a href="">EEE</a></li>
<li><a href="">FFF</a></li>
</ul>
</div>

-- CSS --

#content ul　{
padding: 0;
margin: 0;
list-style-type: none;
}

#content li　{
float: left;
display: block;
padding: 2px 10px 0 5px;
margin: 0;
list-style-type: none;
}

上記の例ですとEEEが1行目に入りきらない場合、Firefox では、EEEが2行目へとなって後が続きます。
IEですと EEE のうち E 1文字だけでも入ると残りの2文字は下方へずれて行きます。そして、FFFから2行目となります。

このIEでの不具合で良い解決法があれば、ご教授願います。

よろしくお願い致します。

回答No.1

acdehimnstwy · ベストアンサー

#content li{}に

white-space:nowrap;

と書けば解決するような気がします。

お礼

ありがとうございます。ばっちりできました。