我还在学习CSS。我正在创建带有时间和得分的游戏。
简而言之,我想创建这个:
这就是我所拥有的:
jsFiddle链接:http://jsfiddle.net/yZKTE/
CSS:
#boxbuttons {
/*text-align: center;*/
/* margin: 20px;*/
display: block;
top:0;
left: 0;
right: 0;
padding:50px;
/*width:900px;*/
}
#boxbuttons .button {
text-transform: uppercase;
padding: 5px 10px;
margin: 5px;
border-radius: 10px;
cursor: pointer;
}
#rezz
{
background:url(../images/score.png) left top;
width:35px;
height:35px;
background-repeat:no-repeat;
}
#counter{
margin-left:50px;
}
#time
{
background:url(../images/time.png) right top;
width:35px;
height:35px;
background-repeat:no-repeat;
}
#ttime{
margin-right:50px;
}
HTML:
<span id="boxbuttons">
<span class="button" id="rezz">
<span id="counter">0</span>
</span>
<span class="button" id="time"><span class="button" id="ttime"></span></span>
</span>
最佳答案
像这样更改#time
css:
#time
{
background:url("http://remake.hr/memtest/images/time.png") right top;
width:100px;
height:35px;
background-repeat:no-repeat;
display: inline-block;
float:right;
}
span
HTML元素默认为display:inline
,这意味着width和height属性不会影响它。通过将其设置为display:inline-block
,可以使width属性负责。我将宽度更改为100px
,因为否则宽度太小。我还添加了float:right
属性,因为它告诉元素浮动到其父元素内的最右边位置。http://jsfiddle.net/yZKTE/1/
编辑:
这样做可以将时间移到时钟图标的右侧:
#time {
background: url("http://remake.hr/memtest/images/time.png") left top;
width: 145px;
height: 35px;
background-repeat: no-repeat;
display: inline-block;
float: right;
line-height: 35px;
padding:0!important;
}
#ttime {
float: right;
font-size: 35px;
line-height: 35px;
margin: 0!important;
padding: 0!important;
}
http://jsfiddle.net/yZKTE/4/
关于javascript - 未能定位元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25000692/