html - 导航栏对齐
问题描述
我需要垂直对齐导航栏中间的栏。我设置了 align-items: center for bar 但它只对齐登录按钮。如您所见,它略高于中间位置。
nav a{
color:white;
}
nav{
justify-content: space-between;
align-items: center;
background-color: brown;
}
nav ul{
list-style: none;
padding: 0;
display: flex;
align-items: center;
background-color: black;
}
nav ul li a{
padding: 1rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 14px;
font-weight: bold;
}
.container{
background-color: green;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container" >
<nav class="d-flex flex-row">
<h1 class="sling"><a href="index.html">Sling</a></h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Testimonial</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact us</a></li>
</ul>
<button type="button" class="signin">Sign in</button>
</nav>
</div>
适当地。
解决方案
您需要margin
将nav ul
. 由于默认浏览器样式而存在边距。
nav a {
color: white;
}
nav {
justify-content: space-between;
align-items: center;
background-color: brown;
}
nav ul {
list-style: none;
padding: 0;
margin-bottom: 0; /* <-- + Added */
display: flex;
align-items: center;
background-color: black;
}
nav ul li a {
padding: 1rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 14px;
font-weight: bold;
}
.container {
background-color: green;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<nav class="d-flex flex-row">
<h1 class="sling"><a href="index.html">Sling</a></h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Testimonial</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact us</a></li>
</ul>
<button type="button" class="signin">Sign in</button>
</nav>
</div>
推荐阅读
- html - 根据容器宽度减小标签文本大小
- c++ - 为什么这个 stl 函数调用会导致不正确的布尔评估?
- c# - 在 c# 中使用来自控制台应用程序的数据注释仅验证模型类的几个属性
- java - 更新数据库中的图片
- javascript - 将带有 & 的 URL 变量从 JS 传递到 PHP 导致“&”省略
- c++ - 我是否需要通过锁来保护对 Boost MultiIndex 索引(索引本身)的访问?
- java - 消除浮点舍入错误的技巧?
- pygame - Pygame,我的圆圈在我将它存储在一个变量中后变成了一个矩形,我该如何防止这种情况发生
- javascript - 如果在表单提交时未选中收音机,则会发出警报
- vb.net - DataGridView 添加行