知乎导航栏实现

最新推荐文章于 2022-08-01 15:40:52 发布

tonyhzw

最新推荐文章于 2022-08-01 15:40:52 发布

阅读量2.1k

点赞数

文章标签：知乎导航栏垂直布局 height为百分比时失效

本文链接：https://blog.csdn.net/datou0529/article/details/51445469

版权

今天看知乎，发现有人评论要称为前端工程师，必须要能够复写知乎导航栏。好嘛，有那么难么，我试试。

导航栏，下拉时仍存在，故使用了固定布局（position:fixed;）。左右有一定空闲，故可以用自适应布局来实现。整个过程不是很难，只是在实现文本垂直居中时走进了误区。

先开始指定导航栏到合适的height，此值比文本字号大，实现文本的垂直居中时出现了问题。考虑到IE下无法实现vertical-align所以放弃此方法，而设置line-height的值与height的值相等在百分比模式下无法实现文本的垂直居中，我特意看了下源代码，发现原代码中指定了px，此时令line-height和height的值都为45px。

遂百度之：高度是百分比的容器如何实现内部的单行文本垂直居中？

看到伪类元素了，不过突然发现这个bug就是由于指定导航栏的高度大于文本高度导致的，所以不指定导航栏高度，同时指定padding来实现文本上下留白。

至此导航完毕。遂加上固定布居，突然出现了个bug，右边有一段空余，然后加上right=0（目前还没想清楚为什么）。所有代码如下：

<!doctype html>
<head>
<meta charset="utf-8">
<title>֪知乎，你的知识库</title>
<style>
html{
height:100%;//注意这里，不然后面的百分比永远不对。
}
body{
height:100%;
margin:0px;
padding:0px;
}
nav{
position:fixed;
top:0px;
left:0px;
right:0px;
padding:1% 20%;
text-align:center;
background-color:green;

}
.profile{
float:right;
width:11.11%;
height:100%;
position:relative;
top:10%;
}
.logo{
float:left;
width:10%;
height:100%;
line-height:100%;
position:relative;
top:10%;
}
#content{
height:100%;
overflow:hidden;
}
.cols1{
float:left;
width:15%;
height:100%;
padding:0% 5%;
position:relative;
top:10%;
text-align:center;
}
a{
text-decoration:none;
}
</style>
</head>
<body>
<nav>
<div class="profile">Tonyhzw</div>
<div class="profile">提问</div>
<div class="logo">知乎</div>
<input type="search" class="logo" style="top:0px;">
<div id="content">
   <div class="cols1"><a href="#">首页</a></div>
   <div class="cols1"><a href="#">话题</a></div>
   <div class="cols1"><a href="#">发现</a></div>
   <div class="cols1"><a href="#">消息</a></div>
</div>
</nav>
</body>
<html>