html - 无法居中导航菜单
问题描述
我似乎无法将导航菜单中的文本居中。
下面是代码片段。
ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: black;
text-align: center;
}
li {
float: left;
display: inline-block;
}
li a {
display: block;
color: #FDE635;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: black;
}
.active {
background-color: white;
color: black;
}
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#download">Download</a></li>
</ul>
当我希望它们居中时,菜单栏中的所有文本都是左对齐的。任何帮助表示赞赏!
解决方案
结合 arieljuod 的评论,您所需要的只是一个将您的列表居中的容器,这可以使用 flexbox 轻松完成。
.d-flex {
display: flex;
}
.flex-center {
justify-content: center;
align-items: center;
}
.nav > ul {
list-style: none;
}
.nav > ul > li {
display: inline-block;
padding: 20px;
}
.nav > ul > li a {
text-decoration: none;
color: black;
}
<div class="nav d-flex flex-center">
<ul>
<li><a href="#">Nav Link</a></li>
<li><a href="#">Nav Link</a></li>
<li><a href="#">Nav Link</a></li>
<li><a href="#">Nav Link</a></li>
</ul>
</div>
另外,这是一支笔:)
推荐阅读
- json - 在Javascript中将二进制文件从Excel xlsb文件解析为JSON
- c++ - ] 之前的预期主要表达?(C++)
- c - 是否可以为进程分配持久内存?
- postman - 如何使用预请求脚本构建 Postman url 查询
- javascript - 无法在 Kendo Grid 中对过滤后的列表进行排序
- opencv - 在 Windows 上使用 conda 安装 opencv 时出现 EEXIST 17 错误
- angular - 即使内部值没有改变,组件 getter 也会触发重新渲染
- python - 如何在 Python 中不使用 urlib2.urlopen 读取 URL?
- c# - 无法从受 Azure AD B2C 保护的 MVC Web 应用程序访问 WebApi
- chart.js - 在 chart.js 中绘制一个带有列的圆环图来表示每小时的统计数据