我的HTML和CSS表现异常。我有一个名为header的div元素,其中有一个页面内链接列表。当我将CSS应用于链接或div元素时,链接将被禁用,即什么都没有
发生在鼠标单击上。我尝试了很多,但无法发现错误。感谢您的帮助。

这是我的HTML组件:

    <div class = "header">
        <img class="logo" src="logo.png" />
        <ul id = "nav">
            <li><a href="#homes">Home</a></li>
            <li><a href="#tutorials">Tutorial</a></li>
            <li class="last"><a href="#contacts">Contact Us</a></li>
        </ul>
    </div>


这是我要应用的CSS:

.header{position:relative;width:950px; margin:0 auto; z-index: -1;}
.header #nav{float: right; margin-top:55px}
.header #nav li{float:left; padding-right:15px; padding-left:15px; line-height:12px; border-     right:1px solid #06F; list-style-type: none;}
.header #nav li.last{border-right:none;}
.header #nav li a{display: inline;font-family: Helvetica, sans-serif; font-weight: bold; font-size: 22px; color:#081d58;}
.header #nav li a:hover{color:#253494;}

最佳答案

我想您可能不完全了解href:“#homes”的作用。如果您在一个名为www.mywebsite.com的网站上,并且将使用href:“ #homes”,它将使您位于同一页面上,但是将名称为#homes的div滚动到页面顶部。

#homes会将您的页面链接到www.mywebsite.com#homes。我的猜测是您想打开一个名为www.mywebsite.com/homes的新网页,在这种情况下,您应该将href更改为:

   <a href: "http://www.mywebsite.com/homes">Home</a>


另外,您的#home div不是可滚动的内容,因此浏览器无法将其移动到顶部,并且页面保持不变。

希望这能解决您的问题^^

关于html - CSS自行禁用链接,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26789242/

10-11 01:41