横並びリストの作り方

CSSメモ　その１でも書いたとおり
ウェブクリ12月号を見て感化されてメモメモ

さて、グローバルメニュー等で横並びリストを使いますが

大きく分けると

• display: inline;
• float: left; /* 状況によりright */

の二つやり方があります。

inlineを使用するときのHTML

<!-- コメントを入れる -->
<ul>
 <li><a href="#">トップ</a></li><!--
 --><li><a href="#">会社概要</a></li><!--
 --><li><a href="#">製品紹介</a></li><!--
 --><li><a href="#">採用情報</a></li><!--
 --><li><a href="#">お問い合わせ</a></li>
</ul>

もしくはこっち

<!-- 終了タグの&gt;を改行 -->
<ul>
 <li><a href="#">トップ</a></li
 ><li><a href="#">会社概要</a></li
 ><li><a href="#">製品紹介</a></li
 ><li><a href="#">採用情報</a></li
 ><li><a href="#">お問い合わせ</a></li>
</ul>

inlineで並べるときは、ソースを普通に改行すると、5pxくらい隙間が出来てしまうので、
じゃあ1行で書けばいいじゃんってなりますが、それだとメンテナンス性が悪く、スマートなコーディングにもならないので

floatでやるとき

なにか特に気がついたら書くかも(;゜∀゜)