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

我对

中的

元素有一个小问题

以下是我正在使用的CSS代码部分：

.rightRapper{
边框样式：虚线；
左边距：105px；
边际上限：0px；
高度：90px；
宽度：100px；
显示：块；
}
.左饶舌歌手{
边框样式：虚线；
左边距：0px；
高度：90px；
宽度：100px；
显示：块；
}

以下是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>

我正试图让

.leftRapper
和
.righrapper
在
战斗箱中并排出现。但是，当我将CSS
display
属性设置为
inline
时，由于某种原因，
s
会被挤压成更小的形状。当我将
显示
设置为
块
时，它会将它们转换为我想要的大小，但它不会以我想要的方式显示它们，因为它们不会以内联方式显示

是什么导致
s
的尺寸变小了？
您可以/应该在
.leftRapper
中添加一个
float:left

其他选项包括，例如，向
.leftRapper
添加或替换以下CSS类/选择器中的属性：

#战斗箱{
宽度：216px；/*将宽度从210增加到216，因为您的边界需要额外的6 px*/
}
.说唱歌手{
边距：0px；/*删除所有边距以适合容器中的两个div*/
显示：内联块；/*在一行中显示块元素*/
}
.左饶舌歌手{
边际：0px；
显示：内联块；
}

不要使用显示块，也可以使用显示内联块。显示内联块也用于文本，不符合您的宽度/高度样式。内联块或浮点是一种方法。你应该添加一个解释，说明你的CSS是做什么的。