html - 在导航栏社交图标中对齐项目不会居中
问题描述
您好,在我的导航栏上,我遇到了一个问题,我的危机帮助按钮无法保持在左侧,而我的社交媒体图标无法居中。我试过证明内容、填充等。它唯一起作用的地方是它在 css 文件中的 header{} 下,但是按钮居中,我不能让它向左移动。
``` <body>
<header>
<nav>
<ul class="crisis_bar">
<a class="crisisbutton" href="#">Crisis HELP!</a>
<li><i class="fa fa-facebook"></i><li>
<li><i class="fa fa-instagram"></i><li>
<li><i class="fa fa-twitter"></i></li>
<div class="social"><i class="fa fa-facebook"></i></li>```
@import url('https://fonts.googleapis.com/css2?family=Concert+One&display=swap');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
header{
display: flex;
justify-content: space-between;
padding: 3px 3%;
background-color: #fff;
border-bottom: 1px solid gray;
align-items: center;
justify-content: center;
}
.crisis_bar {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
}
.crisis_bar li{
}
.crisis_bar li a {
transition: color 0.3s ease 0s;
}
.crisisbutton {
padding: 2px 10px;
background-color: #f3755d;
border: none;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease 0s;
font-family: "Montserrat", sans-serif;
color: #edf0f1;
box-shadow: 0 0 10px black;
text-shadow: 0 0 2px black;
text-decoration: none;
text-transform: uppercase;
font-family: 'Concert One', cursive;
left: 40%;
}
.crisis_bar .social{
justify-content: center;
align-items: center;
}```
解决方案
您忘记了“位置:绝对;” 在“左:x%;”上方 标签。
希望对你有帮助^^
推荐阅读
- powershell - 如何在数组的多个条目上“如果”?
- android - Kotlin 中重复的 MutableSet
- c# - 使用 froala 编辑器发送电子邮件
- javascript - 在另一个函数中调用一个函数并传递它 id,react + redux
- android - Kotiln Generic 类型的 Android Gradle Plugin 3.5.1 数据绑定错误
- .net - 如何检查是否安装了 .Net 4.7.2 的开发人员包?
- google-sheets - Counta(filter()) 公式未按预期工作
- automated-tests - 执行 TestNG 测试用例时出现 NoSuchMethodError
- docker - Gitlab 免费的 docker 注册表
- json - 如何序列化地图
> 使用 gson?