我还在学习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/

10-12 00:20
查看更多