<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)

このブログ記事を参照しているブログ一覧: <li>(リスト)を横一列に表示するには?

このブログ記事に対するトラックバックURL: http://monolog.spanstyle.com/mt/mt-tb.cgi/344

このサイトについて

自分用リンク

Powered by Movable Type 4.22-ja

PR

このブログ記事について

このページは、ishiiが2005年6月11日 05:29に書いたブログ記事です。

ひとつ前のブログ記事は「5月に見た映画でまだ評価してないの一覧」です。

次のブログ記事は「広い意味でのいじめはあったかも」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

アイテム

  • swfobject.png
  • symfony.png
  • doclean.png
  • clean.png
  • twitterui.png
  • php5.2.8-warning.png
  • pagesaver.png
  • analytics.png
  • Munsell Hue Test.png
  • Munsell Hue Test0.png