CSS 防止链接像链接一样工作

Question

我刚刚开始 HTML5 和 CSS3（通过 Odin 项目），第一个项目是复制 Google 主页。我能够设置所有内容，但似乎我的 CSS 以某种方式阻止了我的 header link 表现得像 link。您不能点击它们，悬停效果也不起作用。

它们在我的页脚上运行良好并且应用了我的导航 text-decoration，所以我不确定是什么让它表现得不像 link。我只在 Chrome 测试过它，所以我什至不担心兼容性问题。我做的 HTML5 错了吗？或者这是某种奇怪的规则，比如您不能将悬停效果与 inline-block 或其他东西一起使用？我对它还不够熟悉，无法了解所有这些细微差别...

这是HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Google</title>
    <link rel="stylesheet" href="style.css">
    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
    <ul>
            <li><a href="#" class="atext">+Mara</a></li>
            <li><a href="#" class="atext">Gmail</a></li>
            <li><a href="#" class="atext">Images</a></li>
            <li><a href="#" class="aicon"><img src="images/options.png" width="35px"></a></li>
            <li><a href="#" class="aicon"><img src="images/bell.png" width="35px"></a></li>
            <li><a href="#" class="aicon"><img src="images/plus.png" width="35px"></a></li>
            <li><a href="#"><img src="images/photo.jpg" width="40px" class="rounded_img"></a></li>
    </ul>
</nav>
<div class="container">
<img class="logo" src="https://www.google.com/images/srpr/logo11w.png" width="320px"/>

<center><form action="#" method="post" name="google_search_form">
    <input type="search" name="googlesearch" class="search"><br/><br/>
    <input type="submit" value="Google Search" class="button">
    <input type="submit" value="I'm Feeling Lucky" class="button">
</form></center>
</div> <!--End container-->
<footer>
    <ul>
    <span class="left"><li><a href="#">Advertising</a></li></span>
    <span class="left"><li><a href="#">Business</a></li></span>
    <span class="left"><li><a href="#">About</a></li></span>
    <span class="right"><li><a href="#">Settings</a></li></span>
    <span class="right"><li><a href="#">Terms</a></li></span>
    <span class="right"><li><a href="#">Privacy</a></li></span>
    </ul>
</footer>
</body>
</html>

和 CSS:

.container{
    position: relative;
    vertical-align: middle;
}
.logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 270px;
    clear: right;
}
.search {
    width: 650px;
    height: 35px;
    margin-top: 40px;
    font-size: 27px;
    background: url('images/voice.gif') 97% 50% no-repeat;
    opacity:0.6;
    background-size: 17px;
    border: blue solid 1px;

}
.button {
    font-family: Helvetica, Roboto, sans-serif;
    font-weight: bold;
    color: black;
    background: #f2f2f2;
    border: #d6d6d6 solid 1px;
    border-radius: 2px;
    width: 140px;
    height: 40px;
}
nav {
    width: 600px;
    height: 30px;
    font-size: 1em;
    font-family: Helvetica, Roboto, sans-serif;
    font-weight: lighter;
    text-align: center;
    position: relative;
    float: right;
}
nav ul {
    height: auto;
    padding: 0;
    margin: 0;
}
nav li {
    display: inline-block;
    padding: 10px;
    vertical-align: middle;
}
.atext {
    text-decoration: none;
    color: black;
}
.atext: hover {
    text-decoration: underline;
    background-color: yellow;
}
.aicon {
    opacity: 0.6;
}
.aicon:hover {
    opacity: 1.0;
}
footer {
    width: 102%;
    height: 40px;
    left: -20px;
    right: -20px;
    font-size: 1em;
    font-family: Arial, sans-serif;
    position: absolute;
    bottom: 0;
    background: #f2f2f2;
    border: #d6d6d6 solid 1px;
}
footer ul {
    height: auto;
    padding: 0;
    margin: 0;
}
footer li {
    display: table-cell;
    padding: 10px;
    vertical-align: middle;
}
footer li a {
    text-decoration: none;
    color: gray;
}
.left {
    float: left;
    margin-left: 20px;
}
.right {
    float: right;
    margin-right: 20px;
}
.rounded_img {
    border-radius: 20px;
}

任何帮助将不胜感激。谢谢！

哦，我什至还没有开始 JavaScript，所以我想尽可能避免 JavaScript！

这是一个fiddle：http://jsfiddle.net/Lvfmwhvu/

Answer 1

问题出在你的容器元素上，如果你删除相对位置它会起作用，但不确定它是否会保持在同一位置，但你可以检查它并相应地修改你的css：

.container{
    vertical-align: middle;
}

希望对您有所帮助。

Answer 2

您的主容器未清除浮动导航栏。因为它位于文档的后面，所以它具有更高的层索引并覆盖导航栏。试试这个：

.container {
    ...
    clear: both;
}

Demo

CSS 防止链接像链接一样工作

CSS prevents links from acting like links

html

css

effects

hyperlink

hover