javascript - 定位元素失败

Question

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

Answer 1

有很多原因导致了这个问题。

您要做的第一件事是“收缩包装”您的外部 div。这样当你float一个元素时，它会float到父元素div的右边，而不是最外面的分区。这很难解释，但是放入以下 ​​CSS，并注意 #picbox div 的宽度缩小到与其内容一样宽。

#picbox {
    display: inline-block;
}

您的 #boxcard CSS 有 margin: 0 auto; 居中。您想要删除它，这将使 #boxcard div 一直向左启动。向 div 添加一些 margin-left 使其与标题对齐。像这样:

#boxcard {
    -webkit-perspective:1000;
       -moz-perspective:1000;
        -ms-perspective:1000;
         -o-perspective:1000;
            perspective:1000;
    display: table;
    margin-left: 50px;
    width: auto;
    z-index: 1;
}

最后，让您的 #time div 向右浮动。首先，将 #time 更改为 #boxbuttons #time 以便它覆盖您的 #boxbuttons .button 样式。首先，我们将使用 float: right; 使其 float 。然后，我们将删除您设置的 width，使其占用 auto 宽度。最后，我们将给它一些 padding-left 并将 background 更改为 left top，这样时间和时钟图像就会分开彼此分开，时钟现在在左边。

#boxbuttons #time { 
   background:url("http://remake.hr/memtest/images/time.png") left top; 
   height:35px;
   background-repeat:no-repeat;
   float: right;
   padding-left: 30px;
}

我认为这就是一切。

http://jsfiddle.net/yZKTE/6/