XHTMLで電卓

  • このエントリーをはてなブックマークに追加

この記事で、XHTMLで電卓をつくるというのがあったんで試しに作ってみました!


XHTML

<dl>
<dt>12345</dt>
<dd>1</dd><dd>2</dd><dd>3</dd><dd>4</dd><dd>5</dd><dd>6</dd><dd>7</dd><dd>8</dd><dd>9</dd><dd>0</dd>
</dl>

ddを並べて描いているのは、inline-blockを使うためです。改行などすると、スペースが開いてしまうのです。

CSS

dl {
	padding-bottom: 5px;
	width: 198px;
	border: 1px solid #999;
	background-color: #eee;
	text-align: center;

	_width: 200px;
}

dl dt {
	padding:10px 15px;
	margin: 10px;
	text-align: right;
	background-color: #ccc;
}

dl dd {
	position: relative;
	left: -7px;
	margin: 0 0 5px 14px;
	width: 50px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background-color: #ccc;
	display: inline-block;

	*display: inline;
	*zoom: 1;
}

floatでやろうかなぁ・・。と考えたのですが、できなそうな感じでした・・。

バシャログさんのほうでは、ulでやっていたのですが、dlでやってもいいかなぁとおもって、dlでやってみました!

コメント : 0

コメントフォーム

トラックバック : 0

http://develo.org/mt/mt-tb.cgi/66

このページの先頭へ戻る