如何將導航按鈕放置在HTML中圖像的任一側

請原諒我的無知。在編寫HTML時我很新，在我的問題中無法找到答案，我可以理解，所以我希望有人能幫我弄清楚。如何將導航按鈕放置在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>

任何幫助或想法將不勝感激！

來源

2017-10-08 Zoe

如果我理解你的問題，你可以試試這個：

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>

來源

2017-10-09 00:42:19 Jonjie

您可以使用這樣的事情：

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

來源

2017-10-09 10:32:14 Krusader

如何將導航按鈕放置在HTML中圖像的任一側

回答

相關問題