将导航栏社交图标中的项目对齐不会居中

你好，在我的导航栏上，我遇到了一个问题，我的危机帮助按钮不能放在左边，我的社交媒体图标不能放在中间。我尝试过调整内容、填充等。唯一有效的地方是当它在css文件中的标题｛｝下时，但按钮居中，我无法将其向左移动。

```     <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;
}```

您忘记了"left:x%；"标记上方的"position:absolute；">
希望它能帮助^^

这应该可以工作。我创建了两个名为"half"的类，我把危机栏放在第一个，把媒体图标放在第二个。我删除了一些不必要的代码。我还注意到您丢失了最后的</li>标记。

@import url('https://fonts.googleapis.com/css2?family=Concert+One&display=swap');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
header{
padding: 3px 3%;
border-bottom: 1px solid gray;
}
nav {
width:100%;
}
.crisis_bar {
list-style: none;
display: flex;
}
.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;
}
.half {
width:50%;
}

<body>
<header>
<nav>
<ul class="crisis_bar">
<div class = "half">
<a class="half crisisbutton" href="#">Crisis HELP!</a>
</div>
<li><i class="fa fa-facebook">facebook</i>/</li>
<li><i class="fa fa-instagram">instagram</i></li>
<li><i class="fa fa-twitter">twitter</i></li>
<div class="half social"><li> <i class="fa fa-facebook">facebook</i></li></div>
</ul>
</nav>

</body>

相关内容

最新更新

热门标签：