Question

我正在构建一个导航栏。这就是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;
}

我遇到的问题是右边的最后一个按钮没有与浏览器窗口齐平。我真的不知道自己做错了什么。我在“身体”课程中添加了我认为需要的所有东西，但仍有空间...我的意思是，它顶部没有空间，就在最后一个按钮的右边。

jsfiddle here

Answer 1

这是构建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>

CSS导航栏不会与浏览器冲洗

1 个答案: