Question

导航栏问题（再次）。当你将鼠标悬停在li的中心而不是在底部的顶部时，你只能点击li ...我试图切换LI和As，所以：

<a><li></li></a>

但那也不起作用......

谢谢你， HydraCles

请参阅：http://jsfiddle.net/rksyqf37/

HTML：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="main.css"/>
</head>

<body>

    <ul id="nav">
        <a href="li1.html"><li title="li1">li1</a></li>
        <a href="li2.html"><li title="li2">li2</a></li>
        <a href="li3.html"><li title="li3">li3</a></li>
        <a href="li4.html"><li title="li4">li4</a></li>         
        <a href="li5.html"><li title="li5">li5</a></li>
        <a href="li6.html"><li title="li6">li6</a></li>
        <a href="li7.html"><li title="li7">li7</a></li>
        <a href="li8.html"><li title="li8">li8</a></li>
    </ul>

</body>
</html>

CSS：

body {
    background-image: url("http://static.tumblr.com/97f4b171db68d6ef1836c8fcb9a1c1a3/oi8jcug/xIcn5vql3/tumblr_static_aajc47nn2ds8c0k004gskoo0c.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0px;
    margin: 0px;
}

#nav {
    height: 50px;
    line-height: 50px;
    background-color: #1C1C1C;
    font-size: 0px;
    text-decoration: none;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}

#nav li {
    display: inline-block;
    font-size: 25px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    border-right: 1px solid white;
    height: 50px;
}

#nav li:first-child {
    border-left: 1px solid white;
}

#nav li:hover {
    border-bottom: 2px solid white;
}

#nav a {
    color: white;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
}

Answer 1

<强> HTML

<ul id="nav">
    <a href="li1.html"><li title="li1">li1</li></a>
    <a href="li2.html"><li title="li2">li2</li></a>
    <a href="li3.html"><li title="li3">li3</li></a>
    <a href="li4.html"><li title="li4">li4</li></a>         
    <a href="li5.html"><li title="li5">li5</li></a>
    <a href="li6.html"><li title="li6">li6</li></a>
    <a href="li7.html"><li title="li7">li7</li></a>
    <a href="li8.html"><li title="li8">li8</li></a>
</ul>

结账标记错误，</li>后跟</a>，但 </a></li>

Updated Fiddle

Answer 2

如前所述，HTML标记<a>和<li>被错误放置。但是对于您的第一个问题，您只需将display: inline-block;添加到a选择器即可。顺便说一下，从li中移除填充，然后将其添加到a。

你不能用其他标签包裹li标签。 li标记应始终为ul或ol以下直接标记。

并且您无法点击a，因为默认情况下它是内联标记。这就是为什么你必须添加内联块属性的原因，它允许从内联和最好的块中获得最佳效果;）

upated jsfiddle

Answer 3

我们可以使用Jquery为LI项添加click事件，如下所示。为此，请在LI项目中添加锚标记

  $(document).ready(function() {
     $("#nav li:has(a)").click(function() {
         window.location = $("a:first",this).attr("href");
     });
  });

Answer 4

<ul id="nav">
   <li title="li1"><a href="li1.html">li1</a></li>
 <li title="li2"><a href="li2.html">li2</a></li>
 <li title="li3"><a href="li3.html">li3</a></li>
 <li title="li4"><a href="li4.html">li4</a></li>

</ul>

您的错误是html：<a><li></a></li>而不是<li><a></a></li>。

导航栏 - 李哈弗 - 点击链接

4 个答案: