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

中的示例

Answer 2

如果我理解你的问题，你可以试试这个：

img{
  width: 80px;
  float: left;
}
.button-left{
  float: left;
}

.button-right{
  float: left;
}

button{
  margin-top: 20px;
  cursor: pointer;
}

<button class="button-left">Left</button>
<img src="https://upload.wikimedia.org/wikipedia/commons/4/46/Gray492.png">
<button class="button-right">Right</button>

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

2 个答案: