CSSの小技として、リストアイテムを横に並べる方法です。
リスト要素群において、リストアイテム(<li>要素,<dt>要素及び<dd>要素)は通常縦方向に並べられます。
それを横方向に並べて見ましょう。
リストアイテムに限った話ではありませんが、HTMLの要素にはブラウザ独自のデフォルトスタイルが当てられているものです。
スタイル定義が中途半端だと、デフォルトスタイルに影響されて正しく表示出来ないこともあります。
特にリスト系要素の場合スタイルが細かいので、きちんと再定義しておきましょう。
<li>要素ではリストマーカの位置を、リストアイテムの外部に設定している場合が多いのですが、マーカがリストアイテムの外部にあると、横に並べた時に重なったりしておかしくなる事があります。
そこで、list-style-positionプロパティにinside値を当てる事で、マーカをリストアイテムの一部に組込んでしまいましょう。
創作キャラクタのイラスト例とそれを組み込んだアニメーション動画none値を当てる事でマーカを消すしかありません(他のCSS対応ブラウザでもマーカを消すと言う方法は有効です)。一般に、リストアイテムには字下げ効果の為に余白とパディングが設定されています。
そこで、これらの影響を解消する為に、marginプロパティとpaddingプロパティを使って適切に調整しましょう。
具体的にはpaddingプロパティは0にします。
marginプロパティは見易さを考慮して適宜調整します。
例えば<ul>要素内の<li>要素を横に並べたい場合には、以下のようなスタイルを設定しておくと良いでしょう。
ul li {margin: 0px;padding: 0px;list-item-position: inside;…}
一般にリストアイテムはブロックレヴェル要素に準じた扱いとなるので、当該要素の直前直後で改行が入ります。
そこで、リストアイテムをインライン要素扱い(インラインボックス)に変更すれば、この改行が無くなり、横に並ぶと言う訳です。
displayプロパティを用いる事で、表示方式の変更が可能になります。
また、marginプロパティで左右の余白を指定する事で、リストアイテムの前後に適切な余白が入って観易いものになります。
例えば<ul>要素内の<li>要素を横に並べたい場合には、以下のように書きます。
ul li {display: inline;list-item-position: inside;…}
ネットスケープ 4.xでは上述の通り、リストアイテムに0でないmarginプロパティやpaddingプロパティを当てていると、正しく表示出来ません。
また、リストアイテムにマーカが付いていると、やはり表示がおかしくなります。
そこで以下のようにします。
li {margin: 0;padding: 0;list-style-type: none;display: inline;}
この場合は、リストアイテムの横幅をwidthプロパティで指定しますが、一般にブロックレヴェル式の要素(ブロックレヴェルボックス)は上から下に並べられて行きます。
そこで、floatプロパティでフローティングすることで、左から順に並べるようにしましょう。
例えば<ul>要素内の<li>要素を横に等幅で一行に三つづつ並べたい場合には、以下のように書きます。
ul li {float: left;width: 33%;margin: 0;padding: 0;list-item-position: inside;…}
横幅は、親要素(<ul>要素)によって定まった幅に対する比率を指定します。三つづつ並べるには、100%÷ 3≒33%とすれば良い事になります。
