javascript - 我试图使用带按钮的 figcaption 将图像彼此相邻放置 HTML 和 CSS

Question

我想在网页上的图片下方添加按钮，因此我决定使用 figcaption 标签在每张图片下方插入按钮。但是，当我这样做时，图像会堆叠在一起，而不是像通常那样并排放置。

**My HTML:**

    <section class="mostpurch">    
  <h1> Latest PC downloads... </h1>
    <p> Most purchased on PC </p>
    <img src="images/fallout-4.jpg" class="f41" />
    <figcaption><button type="button">Add to basket</button></figcaption>
    <img src="images/Tom-Clancys-The-Division.jpg" class="tctd1" />
    <figcaption><button type="button">Add to basket</button></figcaption>
    <img src="images/blops3.jpg" class="blops31" />
    <figcaption><button type="button">Add to basket</button></figcaption>
    <img src="images/acsyn.jpg" class="acsyn1" />
    <figcaption><button type="button">Add to basket</button></figcaption> 
  </section>

我不确定我必须在我的 HTML 或 CSS 中做什么才能使它成为可能。 How it currently is (image)

我想让它们并排坐着，下面有按钮。抱歉，如果有更好的方法，我是新手。

提前致谢

- jack

Answer 1

html

<section class="mostpurch">    
  <h1> Latest PC downloads... </h1>
    <p> Most purchased on PC </p>
    <div>
      <img src="images/fallout-4.jpg" class="f41" />
      <figcaption><button type="button">Add to basket</button></figcaption>
    </div>  
</section>

CSS

div{display: inline;}