html - 使用CSS加载图像以水平而不是垂直

Question

我将图像放在屏幕上(只是小圆圈)，每次我按下按钮时都会弹出 10 个。这是正在发生的事情:

它在前一个下面。

这就是我想要发生的事情:

到目前为止我的 CSS:

.numbers {
    position: relative;
    margin-top: 20px;
    padding: 0;
}

.num p {
    color: #877000;
    position: absolute;
    margin: 0 auto;
    font-size: 16.5px;
    margin-top: 5px;
    margin-right: 6px;
    margin-left: 6px;
    float: left;
    font:  "SourceSansProBlack",Arial,sans-serif;
    font-weight: bold;
}


.numbers num img {
    position: relative;
}

.userNumbers {
    position: relative;
}

HTML:

<div class="userNumbers">
 <div class="numbers">
  <div class="num"> <p> 1 </p><img src="pic.png"></div>
  <!--to 10-->
 </div>
</div>

如何使用 CSS 将其更改为彼此相邻？图像位于带有类的 div 中。 :)

基本上每次调用 div 'numbers' 时我都想在它的左边添加 32px.. 而不是在它下面。顺便说一句，我用 JavaScript 调用它，但这无关紧要。

Answer 1

我会把前 10 张图片放在一个带有属性的 div 中:

display: inline-block;

然后只需复制带有图像的 div 就可以了。

例如，

<div style="display: inline-block;">
    <img id="img1" />
    ...
    <img id="img10" />
</div>
<div style="display: inline-block;">
    <img id="img11" />
    ...
    <img id="img20" />
</div>