html - 如何在 HTML 中将导航按钮放置在图像的任一侧

Question

请原谅我的无知。我是编写 HTML 的新手，在这里找不到我能理解的问题的答案，所以我希望有人能帮我解决这个问题。

我想在图像的两侧添加左右箭头导航按钮，但我只能让它们(按钮)位于图像上方或下方。我不太了解如何很好地使用 CSS，但我认为我可能需要使用它才能获得我正在寻找的结果，因为 HTML 非常有限。

这些是我正在使用的按钮:

<form>
<button formaction="[link]">&#8592</button>
    <button formaction="[link]">&#8594</button>
</form>

这是图片(我知道代码很乱，对此我深表歉意)

<p><a href="/beats" target="_self"><img class="alignleft size-full wp-image-1660" height="400" src="https://upload.wikimedia.org/wikipedia/commons/4/46/Gray492.png" style="max-width: calc(100% - 14px); border: 0px solid #000000; padding: 0px; margin: 0.4em auto 1.625em; display: block; clear: both; width: auto;" /></a></p>

如有任何帮助或想法，我们将不胜感激!

Answer 1

你可以这样使用:

HTML:

<button type="button" class="btn btn--left">&#8592</button>
  <img src="https://upload.wikimedia.org/wikipedia/commons/4/46/Gray492.png" class="img" />
<button  type="button" class="btn btn--right">&#8594</button>

CSS:

HTML {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}


.img{
  max-width: 100px;
  vertical-align: middle;
}

.btn {
  display: inline-block;
}

JSFiddle 中的示例