HTMLの画像の両側にナビゲーションボタンを配置する方法

Question

私の無知をお許しください。私はHTMLを書くことで非常に新しいです、そして、私が理解できる私の質問にここで答えを見つけることができなかったので、誰かが私にこれを理解させるのを助けることを望んでいます。

画像の両側に左右の矢印ナビゲーションボタンを追加したいと思いますが、画像の上または下に移動することができます（ボタン）。私はCSSの使い方を理解していませんが、HTMLがかなり限られているので、私が探している結果を得るためにはCSSを使用する必要があるかもしれません。

これらは私が使用していボタンです：

<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

、あなたはこれを試すことがあります。

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>

Answer 2

あなたはこのようなものを使用することができます。

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