Question

我刚开始使用HTML5和CSS3（通过The Odin Project工作），第一个项目是复制Google主页。我能够设置所有内容，但似乎我的CSS在某种程度上阻止了我的标题链接像链接一样。您无法点击它们，悬停效果也无法正常工作。

它们在我的页脚上正常工作并且我的导航文本修饰被应用，所以我不确定是什么让它表现得像它不是一个链接。我只在Chrome中测试过，所以我甚至不担心兼容性问题。我在做HTML5错了吗？或者它是某种奇怪的规则，就像你不能使用内联块或其他东西的悬停效果？我还不熟悉它还没学会所有这些细微差别......

这是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！

这是一个小提琴：http://jsfiddle.net/Lvfmwhvu/

Answer 1

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

.container{
    vertical-align: middle;
}

希望这有帮助。

Answer 2

您的主容器未清除浮动的导航栏。因为它会在文档中稍后出现，所以它具有更高的图层索引并覆盖导航栏。试试这个：

.container {
    ...
    clear: both;
}

<强> Demo

CSS可以防止链接像链接一样起作用

2 个答案: