css – 如何并排放置元素？

这些< 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显示属性设置为内联时,由于某种原因,< span> s会被压缩成较小的形状.当我将显示设置为阻止时,它会将它们转换为我想要的大小,但它不会以我想要的方式显示它们,因为它们不是内联显示的.

导致< span> s缩小的原因是什么？

#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;
}