Question

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

以下是我正在使用的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>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

Answer 2

您可以/应该将float: left添加到.leftRapper。

其他选择例如是向.leftRapper添加负右边距。

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

2 个答案: