我刚刚开始使用 HTML5 和 CSS3(通过 Odin 元素)，第一个元素是复制 Google 主页。我能够设置好所有内容，但似乎我的 CSS 以某种方式阻止了我的标题链接像链接一样工作。您无法点击它们，悬停效果也不起作用。
它们在我的页脚上运行良好并且应用了我的导航文本装饰，所以我不确定是什么让它表现得像不是链接。我只在 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/
最佳答案
问题是你的容器元素，如果你删除相对位置它会工作，但不确定它是否会保持在相同位置，但你可以检查它并相应地修改你的 css:
.container{
vertical-align: middle;
}
希望这对您有所帮助。
关于html - CSS 防止链接像链接一样工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29371027/