<li>(リスト)を横一列に表示するには?

ある区切りごとに作られたアーカイブへのリンクには<ul>を用いるべきだけど、縦に長くなってくるとだんだん見苦しくなってきます。

例えばこんな感じ

  • 2005年
  • 2004年
  • 2003年
  • 2002年
  • 2001年
  • 2000年
  • 1999年
  • 1998年
  • 1997年
  • 1996年
  • 1995年
  • 1994年
  • 1993年

なげーよ!

これをスッキリと横並びにしてしまいましょう。

<style type="text/css">
.list {
list-style: none;
margin: 0;
padding: 0;
}
.list li {
margin: 0;
padding: 0 0 0 10px;
float: left;
}
</style>

<ul>(もしくは<ol>)タグにclass="list"を適用すれば、こんな感じに。

  • 2005年
  • 2004年
  • 2003年
  • 2002年
  • 2001年
  • 2000年
  • 1999年
  • 1998年
  • 1997年
  • 1996年
  • 1995年
  • 1994年
  • 1993年


あらステキ。

トラックバック(0)

このブログ記事を参照しているブログ一覧:

このサイトについて