html - 添加位置固定会破坏导航的对齐方式
问题描述
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: #fff;
color: #333;
line-height: 1.5;
}
header {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #fff;
position: fixed;
overflow: hidden;
}
.logo {
font-size: 1.5rem;
color: #333;
letter-spacing: 5px;
}
ul li {
list-style: none;
}
.nav-list-item {
color: #333;
text-decoration: none;
}
.nav-list {
display: flex;
justify-content: space-around;
<header>
<div class="logo">
<h3>My Name</h3>
</div>
<ul class="nav-list">
<li><a href="#" class="nav-list-item">Home</a></li>
<li><a href="#" class="nav-list-item">About</a></li>
<li><a href="#" class="nav-list-item">Projects</a></li>
<li><a href="#" class="nav-list-item">Contact</a></li>
</ul>
</header>
我想要一个位于中心的菜单,并在我向下滚动时将其固定。但由于某种原因,在添加了一个固定位置之后。它破坏了实际的对齐方式,我不知道如何修复它。
解决方案
只需添加width: 100%
到您的header
课程中:
header {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #fff;
position: fixed;
overflow: hidden;
width: 100%
}
推荐阅读
- r - R的foreach包中工人的表现不佳
- algorithm - 为什么 Apple FileVault 使用块加密算法而不是流加密算法?
- sql - 数据库不会使用用户表单获得新值
- database - 如何在视图页面上显示数据
- python - 如何在 Python 中删除字符串的第一部分和最后一部分?
- r - 序列中的元素返回一个字符串
- windows - 如何查看文件何时重命名
- regex - 不要选择是否包含附加字符
- javascript - 如何将 Internet Explorer 10 支持添加到简单的 VueJs 组件?
- angular - 在 IntelliJ 中的本地 Tomcat 上部署 Spring Boot