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

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

像这样：

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

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

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

2 个答案: