Question

为了帮助解释这种情况，我粘贴了下面的代码。发生的事情是包含其中内容的其他列表的导航按钮（ul＆gt; li＆gt; ul），该链接不起作用，除非我专门点击文本（如果我点击该文本，则不起作用）按钮的外部区域）。这可能有点令人困惑，但请查看下面的jsfiddle，然后点击＆＃34;关于＆＃34;，＆＃34;为什么＆＃34;和＆＃34;事件＆＃34;页。如果专门点击文字，你会发现它只会重定向到新网站。

问题是什么？我已经尝试了无数的东西，并且无法让它发挥作用。

这是关于标签的。我已经尝试将标签放在li标签之前，在li标签之后，似乎没有任何效果。

 <li><a href="about.php">About</a>
  <ul>
    <a href="about.php#expectations"><li>Expectations</li></a>
    <a href="about.php#faq"><li>FAQ</li></a>
    <a href="laptopprogram.php"><li>Laptop Program</li></a>
  </ul>
</li>

有问题的Jsfiddle：http://jsfiddle.net/hmourp8o/

Answer 1

有两个问题：

1）布局html的正确方法是在<a>...</a>标记内添加<li>...</li>。完成此操作后，只有按钮的文本部分可以单击。

2）所以现在你需要设置<a>...</a>的大小并确保它填满<li>...</li>

通常我会用css这样做：

a {
    display:inline-block;
    margin: 0;
    width: 200px;
    height: 50px;
    line-height ... etc
}

现在您可以从padding元素中删除<li>，将悬停的转换移动到<a>标记等。通常，您会设置链接的样式，而不是列表项。 <ul>和<li>样式将主要用于定位。

你必须摆弄一些其他的css风格，但这是基本的想法。

Answer 2

因为标签是内联元素，所以它显示的是小区域。您可以将display: block添加到代码中。然后标签将是块元素。

请参阅：

http://jsfiddle.net/hmourp8o/3/

#navbar a{
display: block;
}

Answer 3

尝试这个，在css后添加

nav#navbar li > a {
display: block;
height: 50px;
margin: 0px -35px;
padding: 0px 35px;
}

working demo

ul li链接不起作用（在导航栏中）

3 个答案: