HTML按钮链接无法在移动设备

时间:2016-05-31 11:19:12

标签: html wordpress button

如果有人能帮我解决这个问题,我真的很感激吗?

我目前正在使用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/

上使用的网站

非常感谢!

2 个答案:

答案 0 :(得分:0)

这样可以起作用

<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>

答案 1 :(得分:0)

将Anchor标记赋予内联样式或类哪个属性应显示块

像这样:

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

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