<a> 标记在移动模式下不能用作链接

Question

我在视图中有一个标签，它在桌面模式下正常工作，但当我将页面调整为移动时，它不再工作，因为链接只是一个文本

这是我的html代码：

<div class="gbox-container">
<div class="item a">...</div>
<div class="devider">...</div>
<div class="item b">
<div class="tabs">
<section id="tab-8">
<div class="details-box">
<div class="testRow"><a href="account/login"> Link Text </a></div>
</div>
</section>
</div>
</div>
<div class="item c">...</div>
</div>

链接不起作用的原因是".tabs"类

这是选项卡类：

@media (max-width: 500px)
.tabs {
width: 90vw;
}

当我删除"width:90ww；"时，链接工作正常

Answer 1

报告的问题是链接在较小的设备上无法点击，从评论中的信息来看，这似乎是因为将选项卡div设置为固定宽度。

然而，我已经运行了给定的代码，它似乎只需要进行一些小的修改。媒体查询缺少一些括号，这可能意味着(取决于它在样式表中的位置(一些相关的样式也不起作用。我添加了颜色，很明显，较小设备的造型得到了正确的应用。运行代码段整页，并逐渐减小窗口宽度以进行测试。如果没有完整的CSS和真实页面的内容，就无法判断这在真实情况下是否有效。

@media (max-width: 500px)
{
.tabs {
width: 90vw;
background-color: cyan;
}
}

<div class="gbox-container">
<div class="item a">...</div>
<div class="devider">...</div>
<div class="item b">
<div class="tabs">
<section id="tab-8">
<div class="details-box">
<div class="testRow"><a href="account/login"> Link Text </a></div>
</div>
</section>
</div>
</div>
<div class="item c">...</div>
</div>

Answer 2

@media (max-width: 500px)
.tabs {
width: 90vw;
display: revert;
}