近頃の、とあるR。

今年、2件ほどギャラリーサイトをコーディングしました。
JSでゴリゴリと動かす感じ物でしたが、その際何気にハマったのが表題の件。
横スクロールさせる上で、まず、横一列に並べなくてはなりません。

改行させない

サンプルはこちら。
まずは、inlineで並べた要素を改行させない命令が肝。

#thumbnails {
	white-space: nowrap;
}

でもこのままでは余白がグチャグチャなので、それらを整える必要があります。

整える

#thumbnails {
	display:block;
	margin:0;
	padding:0;
	font-size:9px;
	font-family:sans-serif;
	white-space: nowrap;
}
#thumbnails img {
	margin:0;
	padding:0;
	border:0;
}
#thumbnails a {
	display:inline;
	margin:0 -2px 0 0;
	padding:0;
	border:0;
}

我ながら強引(ノ∀`)
inlineで何となく開く要素間マージンをフォント指定で調整し、その後マイナスマージンで詰めています。
このケースの場合、IE6～8、FF3.5、Chrome3.0、Safari4.0.2、mac Sarfari4.0.3、mac FF3.5 での横マージンが同じになりますが、フォントファミリー、フォントサイズ指定によって、ズレますOrz
恐るべしinline。
素直にtableを使うべきか。