文章/答案/技术大牛

发布

社区首页 >问答首页 >导航栏-李汉佛-点击链接

问导航栏-李汉佛-点击链接
EN

Stack Overflow用户

提问于 2015-04-28 08:41:59

回答 4查看 1.2K关注 0票数 0

导航条的问题(再次)。只有当你盘旋在李的中心，而不是在底部的顶部时，你才能点击李.我试着转换LIs和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;
}

css

navbar

nav

navigationbar

html

回答 4

Stack Overflow用户

回答已采纳

发布于 2015-04-28 09:00:24

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

您不能用其他标记包装li标记。li标记应该始终是ul或ol直接跟踪标记。

而且你不能点击你的a，因为默认情况下它是一个内联标记。这就是为什么您必须添加内联块属性，它允许最好的内联和最好的从块;)

翘起小提琴

票数 2

Stack Overflow用户

发布于 2015-04-28 08:45:17

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

结束标记是错误的，它应该是</a></li>，应该是</li>，后面是</a>，但它是</a>

更新Fiddle

票数 2

Stack Overflow用户

发布于 2015-04-28 09:08:41

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

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29914478

复制

相似问题

问导航栏-李汉佛-点击链接
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问导航栏-李汉佛-点击链接EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问导航栏-李汉佛-点击链接
EN