链接未被阻止时不可点击

Question

我有一个包含链接的html列表。 由于某些原因，当列表项设置为display:inline或display:inline-block ，链接不可单击，并且列表项上的悬停状态不起作用。 仅当列表项设置为display:block时，链接才可单击，并且悬停状态有效。

这是一个演示问题的jsfiddle 。

这是一个jsfiddle ，其列表项设置为阻止，链接是可单击的。

如何将列表项设置为display:inline并仍然具有它们的功能？

Answer 1

我实际上没有看到任何问题，但这听起来像是利润率下降的问题。 试试你设置a标签display: block ，然后将他们的父母li s到display: inline-block

小提琴

Answer 2

我想我可能已经解决了您的问题。 （尽管我绝对不能接受任何wordpress经验，严格来说就是HTML，CSS和Javascript。）在您的html中，您遇到了堆栈顺序问题，而一个元素却使另一个元素变得晦涩。 您将标题设置得过高，并且阻止了主站点内容的顶部，这就是为什么只有在链接层叠到标题部分下方之后，链接才可单击的原因。 display:block或display: inline-block与标签的可点击性无关（据我所知）。

当前代码为： <header id="masthead" class="site-header" role="banner" style="height:140px">

像这样将140更改为67： <header id="masthead" class="site-header" role="banner" style="height:67px">

希望对您有用！ :)