css – 如何并排放置元素？

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

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

解决方法

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

原文链接：https://www.f2er.com/css/216106.html

css – 如何并排放置元素？

解决方法

猜你在找的CSS相关文章