css - 如何并排放置 元素？

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 时属性(property)inline , <span>s由于某种原因被压成较小的形状。当我设置 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;
}

Example