CSS: 2006年5月アーカイブ

こんな過去ログの索引があるとする

<ul>
<li><a href="#Y2000">2000年</a>
<ul>
<li><a href="#Y2000M1">1月</a></li>
<li><a href="#Y2000M2">2月</a></li>
<li><a href="#Y2000M3">3月</a></li>
<li><a href="#Y2000M4">4月</a></li>
<li><a href="#Y2000M5">5月</a></li>
<li><a href="#Y2000M6">6月</a></li>
<li><a href="#Y2000M7">7月</a></li>
<li><a href="#Y2000M8">8月</a></li>
<li><a href="#Y2000M9">9月</a></li>
<li><a href="#Y2000M10">10月</a></li>
<li><a href="#Y2000M11">11月</a></li>
<li><a href="#Y2000M12">12月</a></li>
</ul>
</li>
<li><a href="#Y2001">2001年</a>
<ul>
<li><a href="#Y2001M1">1月</a></li>
<li><a href="#Y2001M2">2月</a></li>
<li><a href="#Y2001M3">3月</a></li>
<li><a href="#Y2001M4">4月</a></li>
<li><a href="#Y2001M5">5月</a></li>
<li><a href="#Y2001M6">6月</a></li>
<li><a href="#Y2001M7">7月</a></li>
<li><a href="#Y2001M8">8月</a></li>
<li><a href="#Y2001M9">9月</a></li>
<li><a href="#Y2001M10">10月</a></li>
<li><a href="#Y2001M11">11月</a></li>
<li><a href="#Y2001M12">12月</a></li>
</ul>
</li>
</ul>

見た目はこんな感じ。うーん、縦に長すぎる。
fig1.png

水平に並べてスペースを縮めたい

全部インライン要素として表示させちゃう。ちなみに LI 要素の display は 'list-item' なので、'inline' に変えてしまう事で list-style-type や list-style-position などの指定は無効になる…のかな。

ul,
li
{
	display: inline;
	margin: 0;    /* デフォルトの margin をクリア。 */
	padding: 0;    /* デフォルトの padding をクリア。 */
}

fig2.png

飾り付けてそれらしく

ul,
li
{
	display: inline;
	margin: 0;
	padding: 0;
}

body
{
	line-height: 200%;
}

a
{
	padding: 0.2em 1em;

	border-right: 1px solid silver;
	border-bottom: 1px solid silver;

	background-color: #FFF0E0;

	font-weight: bold;
	text-decoration: none;
}

ul ul a
{
	background-color: #F8F8F8;
}

fig3.png

このアーカイブについて

このページには、2006年5月以降に書かれたブログ記事のうちCSSカテゴリに属しているものが含まれています。

前のアーカイブはCSS: 2005年7月です。

次のアーカイブはCSS: 2006年6月です。

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

Powered by Movable Type 4.12