HTML按鈕鏈接在手機上不起作用

Question

如果有人能夠幫我解決這個問題，我真的很感激它嗎？

我目前正在使用一個wordpress網站，將我自己的代碼添加到頁眉頂部區域 - 操作欄。這些按鈕在桌面上工作正常，但是當縮小到移動時，鏈接縮短並根據右側和左側按鈕壓扁到右側或左側。

我注意到模板包裝或容器的填充可能是問題，因爲這是它所覆蓋的區域。但是我不知道如何解決這個問題，因爲它不會像預期的那樣容易改變。

下面是HTML代碼：

<a href="http://joyskipper.co.uk/food-styling-recipe-development/"><div style="width:100px;background-color: #F6A000;text-align:center;float:left;padding:10px;margin:10px;color:#fff;">FOOD</div></a> 

和容器上填充的例子導致了問題 Here

我寧願如果按鈕保持周圍的框中的鏈接，而不是僅僅文本。

這是在其網站上使用http://www.joyskipper.co.uk/nutrition/

非常感謝！

Answer 1

給這樣它可能工作

<a href="http://joyskipper.co.uk/food-styling-recipe-development/" style="width:100px;background-color: #F6A000;text-align:center;float:left;padding:10px;margin:10px;color:#fff;text-decoration:none;"> 
<div >FOOD</div></a> 

Answer 2

給錨標籤內聯樣式或類屬性應顯示塊

這樣的：

<a href="#." style="display:block;"> Lorem ipsum </a> 

.block-tag { 
    display:block; 
} 
<a href="#." class="block-tag"> Lorem ipsum </a>