html - 如何居中导航栏和右侧的一项
问题描述
其实我做了这个:
* {
margin: 0;
padding: 0;
}
header {
position: fixed;
height: 35px;
width: 100vw;
z-index: 2;
background-color: rgba(0, 0, 0, 1);
}
.nav {
overflow: hidden;
position: relative;
display: flex;
justify-content: center;
height: 100%;
align-items: center;
text-transform: uppercase;
}
li {
list-style: none;
}
.center {
text-align: center;
display: flex;
}
.right {
right: 0;
text-align: right;
}
.nav .text1 {
color: #f2f2f2;
padding: 15px 35px;
text-decoration: none;
font-size: 12px;
}
<header>
<div class="nav">
<div class="center">
<li><a class="text1" href="#">one</a></li>
<li><a class="text1" href="#">two</a></li>
<li><a class="text1" href="#">tree</a></li>
</div>
<div class="right">
<li><a class="text1" href="#">four</a></li>
</div>
</div>
</header>
我怎样才能把“四”元素放在正确的位置?
解决方案
您非常接近,但忘记将.right
元素的位置设置为绝对位置。right: 0
不会对具有默认(又名静态)定位的元素做任何事情。https://developer.mozilla.org/en-US/docs/Web/CSS/position
* {
margin: 0;
padding: 0;
}
header {
position: fixed;
height: 35px;
width: 100vw;
z-index: 2;
background-color: rgba(0, 0, 0, 1);
}
.nav {
overflow: hidden;
position: relative;
display: flex;
justify-content: center;
height: 100%;
align-items: center;
text-transform: uppercase;
}
li {
list-style: none;
}
.center {
text-align: center;
display: flex;
}
.right {
position: absolute;
right: 0;
text-align: right;
}
.nav .text1 {
color: #f2f2f2;
padding: 15px 35px;
text-decoration: none;
font-size: 12px;
}
<header>
<div class="nav">
<div class="center">
<li><a class="text1" href="#">one</a></li>
<li><a class="text1" href="#">two</a></li>
<li><a class="text1" href="#">tree</a></li>
</div>
<div class="right">
<li><a class="text1" href="#">four</a></li>
</div>
</div>
</header>
推荐阅读
- powershell - Copy-items powershell 中的模式是什么,长度值始终为 0?
- task - AWS Connect API - StartTaskContact 操作:InvalidRequestException:
- android - 在 Xamarin Forms 中获取设备音量
- regex - google_logging_project_sink Terraform 脚本中的正则表达式过滤器错误
- coq - VecUtil:通过两种略有不同的方式获取处理后向量的第 n 个元素
- javascript - NodeJs:如何使用全局过滤器在 asyc 函数中捕获未处理的异常?
- python - 如何在 Python 中重命名解压缩的文件?
- docker - Alpine 是否知道 Kubernetes 中的 DNS 问题?
- javascript - 在屏幕阅读器(NVDA)浏览模式下,带有 e.key === 'Enter' 的 JS 函数不会触发
- swift - 如何禁用用于应用内购买的按钮,而不将其放入另一个线程?