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>