如何并排放置<span>元素？

Question

我对这些<span>元素有一个小问题<div>.

http://jsfiddle.net/kkzLW/179/

这是我正在使用的CSS代码部分:

.rightRapper {
  border-style: dotted;
  margin-left: 105px;
  margin-top: 0px;
  height: 90px;
  width: 100px;
  display: block;
}

.leftRapper {
  border-style: dotted;
  margin-left: 0px;
  height: 90px;
  width: 100px;
  display: block;
}

这是HTML部分:

<div id="battleBox">
  <span class="leftRapper">
    <span id="buttonColumn">         
      <span id="container3" class="topButton">
        <a href="" id="linktomouseover">+</a>   
      </span>
      <span id="container4" class="bottomButton">
        <a href="" id="linktomouseover2">-</a>
      </span>
    </span>
  </span>
  <span class="rightRapper">
    <span id="buttonColumn">         
      <span id="container" class="topButton">
        <a href="" id="linktomouseover3">+</a>   
      </span>
      <span id="container2" class="bottomButton">
        <a href="" id="linktomouseover4">-</a>
      </span>
    </span>
  </span>
</div>

我试图让<span> .leftRapper与.rightRapper是并排的<div> battleBox.但是,当我将CSS display属性设置为时,由于某种原因inline,<span>sget会变成较小的形状.当我设置display为block,它将它们变成我想要的大小,但它不会按我想要的方式显示它们,因为它们不是内联显示的.

是什么导致<span>s尺寸变小？

Answer 1

在以下CSS类/选择器中添加或替换以下属性:

#battleBox {  
  width: 216px; /* increasing width from 210 to 216 because your border takes 6 extra px*/
}

.rightRapper {
  margin: 0px; /* remove all margins to fit two divs in the container */
  display: inline-block; /* display block elements in one line */
}

.leftRapper {
  margin: 0px;
  display: inline-block;
}

例