趣味は車輪の再発明♪

横並びリストと項目の区切り



ULのリストを横に並べて、各項目間に区切り文字を表示する方法。

LIはブロック要素なので、普通なら縦に並びますが、以下のように横に並べ、かつ各項目間に区切り文字を挿入したい。

  • Item 1
  • Item 2
  • Item 3
  • Item 4

横に並べるのはliをinlineにすればよし。これは簡単なこと。 で、項目間に区切るを入れるのはCSS3の範疇かな。 CSS3に非対応のIE6~8では、selectivizr を読み込んで処理するようにしていますが、ちゃんと表示されているかどうかは未確認です。

このサイトでは、ヘッダのリンク一覧や、フッタのバージョン表記で使っています。

ULを使わなくても、p に項目を並べて、区切り文字を挟めば、見た目には問題ありません。 でも、やっぱり、リストはリストとして記述されているほうが、よりHTMLらしく、望ましいと思います。 機械的に文書を解釈するような場合(自動読み上げソフトなど)でも、よりよい結果が得られやすいかも知れません。


HTML

以下のように、HTMLは普通のULとLIによるリストです。ULに'inline'というクラス名を付けていますが、項目の区切り線は書いていません。

<ul class="inline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

CSS

UL.inlineとそのLIに対して、以下のようにスタイル指定します。

ul.inline {
  list-style:none;
  padding-left:0;
}
ul.inline > li {
  display:inline;
}
ul.inline > li:not(:nth-child(1)):before {
  content:" | ";
  color:silver;
}

LIを display:inline で横に並べ、2番目以降(1番目以外)のLIの直前に区切り線('|')を挿入しています。



RSS Feed Widget
横並びリストと項目の区切り
(http://bicycle.life.coocan.jp/takamints/index.php/techtips/inlineList)
by Koji Takami ( email: vzg03566@gmail.com, GitHub: takamin )