鏈接未被阻止時不可點擊

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

希望對您有用！ :)