XHTMLで電卓
- 12345
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 0
XHTMLで電卓 サンプル
[XHTML+CSS]30分でトライするコーディング実技試験サンプル
この記事で、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/73