我正在构建一个导航栏。这是 HTML 的样子
<div class="navhead">TEXT</div>
<div class="navcontainer">
<a href="#"><div class="button">TEXT</div></a>
<a href="#"><div class="button">TEXT</div></a>
<a href="#"><div class="button">TEXT</div></a>
<a href="#"><div class="button">TEXT</div></a>
<a href="#"><div class="button">TEXT</div></a>
</div>
这就是 CSS 的样子。
body {
margin:0px;
padding:0px;
font-family:"futura";
margin-top:75px;
height:100%;
width:100%;
}
.navcontainer {
width:100%;
position:fixed;
background-color:#FFF;
height:60px;
top:24px;
border:solid;
color:#000;
border-top:none;
border-bottom:solid;
border-left:none;
border-right:none;
margin:0px;
padding:0px;
}
.button {
width:20%;
height:60px;
float:left;
background-color:#FFF;
color:#000;
text-align:center;
vertical-align:central;
line-height:60px;
transition:background-color 1.5s ease;
margin:0px;
padding:0px;
}
.button:hover {
width:20%;
height:60px;
float:left;
background-color:#000;
color:#FFF;
text-align:center;
vertical-align:central;
line-height:60px;
margin:0px;
padding:0px;
}
.navhead {
width:100%;
color:#FFF;
background-color:#000;
position:fixed;
top:0px;
height:24px;
text-align:center;
font-size:9px;
line-height:24px;
}
我遇到的问题是右边的最后一个按钮没有与浏览器窗口齐平。我真的不知道我做错了什么。我将我认为我需要的所有内容都添加到“body”类中，但仍然有空间......我的意思是，它上面没有空间，就在最后一个按钮的右侧。
最佳答案
这是构建 HTML 的更好方法，也是创建菜单的更可靠方法:http://codepen.io/pageaffairs/pen/xaGuq
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
margin:0px;
padding:0px;
font-family:"futura";
margin-top:75px;
height:100%;
width:100%;
}
.navcontainer {
width:100%;
position:fixed;
background-color:#FFF;
top:24px;
border:solid;
color:#000;
border-top:none;
border-bottom:solid;
border-left:none;
border-right:none;
margin:0px;
padding:0px;
list-style: none;
display: table;
table-layout: fixed;
}
.navcontainer li {display: table-cell;}
.navcontainer li a {line-height: 60px;
background-color:#FFF;
color:#000;
text-align:center;
transition:background-color 1.5s ease;
display: block;
text-decoration: none;
}
.navcontainer li a:hover {
background-color:#000;
color:#FFF;
}
.navhead {
width:100%;
color:#FFF;
background-color:#000;
position:fixed;
top:0px;
height:24px;
text-align:center;
font-size:9px;
line-height:24px;
}
</style>
</head>
<body>
<div class="navhead">TEXT</div>
<ul class="navcontainer">
<li>
<a href="#">TEXT</a>
</li>
<li>
<a href="#">TEXT</a>
</li>
<li>
<a href="#">TEXT</a>
</li>
<li>
<a href="#">TEXT</a>
</li>
<li>
<a href="#">TEXT</a>
</li>
</ul>
</body>
</html>
关于html - CSS 导航栏不与浏览器齐平，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21961093/