css li の改行について

質問

フッターの箇所にliにて項目を入れているのですが、
項目数が多くて中途半端な箇所で2行目に行ってしまいます。
最後の項目を先頭に綺麗に改行できるようにするには、
どのようにすれば宜しいでしょうか？
基本的な質問ではありますが、よろしくお願いします。

＜css＞
#footer ul {
padding: 0px 0px 0px 20px;
}
#footer li {
font-size:10px;
float:left;
padding: 5px 7px 3px 7px;
background-image: url(images/lnav_line.gif);
background-repeat: no-repeat;
background-position: right center;
}

＜HTML＞
<div id="footer">
<ul>
<li>肩こり トップ</li>
<li>肩こりって？</li>
<li>女性に多い肩こり原因</li>
<li>一般的な肩こり原因</li>
<li>肩こり解消法</li>
<li>肩こりの治らない理由</li>
<li>肩こり解消・予防のための栄養素</li>
<li>肩こりと頭痛</li>
<li>ストレスからの肩こりと自律神経</li>
</ul>
</div><!--footer-->

回答No.2

nori_007 · ベストアンサー

最近フッタを大きくするのも流行っていますので、素直に２行にするのはどうでしょうか。自分なら２行にします。

<div id="footer">
<ul>
<li>肩こり トップ</li>
<li>肩こりって？</li>
<li>女性に多い肩こり原因</li>
<li>一般的な肩こり原因</li>
<li>肩こり解消法</li>
</ul>
<ul>
<li>肩こりの治らない理由</li>
<li>肩こり解消・予防のための栄養素</li>
<li>肩こりと頭痛</li>
<li>ストレスからの肩こりと自律神経</li>
</ul>
</div>
<!--footer-->

回答No.1

steel_gray

試してないけど
white-space:no-wrap;
でも入れてみてはどうだろう？(自動改行が禁止されるはず)

http://www.y-adagio.com/public/standards/tr_css2/text.html#white-space-prop