我试图在我的导航栏中水平显示三个社交媒体图标,但无论我做什么,它们似乎都显示在另一个下方。为了创建我的导航栏,我使用“Off Canvas Menu Effects”让它滑入和滑出(这将解释一些奇怪的 css)。我只发布了下面导航的 html 和 css,我希望这足以帮助你帮助我,哈哈。
.menu,
.icon-list {
height: 100%;
}
.icon-list a img {
max-width:100%;
margin-left: -5px;
}
.icon-list {
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
.icon-list a {
display: block;
/*padding: 0.8em;*/
padding-bottom: 50px;
-webkit-transform: translate3d(0,500px,0);
transform: translate3d(0,500px,0);
}
.icon-list,
.icon-list a {
-webkit-transition: -webkit-transform 0s 0.4s;
transition: transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.icon-list a:nth-child(2) {
-webkit-transform: translate3d(0,1000px,0);
transform: translate3d(0,1000px,0);
}
.icon-list a:nth-child(3) {
-webkit-transform: translate3d(0,1500px,0);
transform: translate3d(0,1500px,0);
}
.icon-list a:nth-child(4) {
-webkit-transform: translate3d(0,2000px,0);
transform: translate3d(0,2000px,0);
}
.icon-list a:nth-child(5) {
-webkit-transform: translate3d(0,2500px,0);
transform: translate3d(0,2500px,0);
}
.icon-list a:nth-child(6) {
-webkit-transform: translate3d(0,3000px,0);
transform: translate3d(0,3000px,0);
}
.icon-list a span {
font-weight: 700;
}
.icons{
width: 40px;
height: 40px;
display:inline-block;
float: left;
}
.facebook {
}
.twitter{
}
.linkedin{
}
<nav class="menu">
<div class="icon-list">
<a href="index.html"><img src="logo.jpg" alt="logo" class="logo"></a>
<a href="#"><i class="fa fa-fw fa-star-o"></i><span>HOME</span></a>
<a href="#"><i class="fa fa-fw fa-bell-o"></i><span>ABOUT</span></a>
<a href="#"><i class="fa fa-fw fa-envelope-o"></i><span>PRODUCTS</span></a>
<a href="#"><i class="fa fa-fw fa-comment-o"></i><span>SALES & MOTIVATION</span></a>
<a href="#"><i class="fa fa-fw fa-bar-chart-o"></i><span>CONTACT</span></a>
<a href="#"><i class="fa fa-fw fa-newspaper-o"></i><span>CONNECT</span></a>
<div class="icons">
<a href="facebook.com"><img src="facebook.jpg" alt="facebook" class="facebook">
<a href="twitter.com"><img src="twitter.jpg" alt="twitter" class="twitter"></a>
<a href="linkedin.com"><img src="linkedin.jpg" alt="linkedin" class="linkedin"></a>
</div>
</div>
</nav>
最佳答案
所以我不能 100% 确定您对最终结果的期望,但我认为这会有所帮助。
首先,display: block
正是让事物相互堆叠的原因,所以您肯定不希望这样。在您的 .icon-list a
选择器中将其更改为 display: inline-block
。
其次,您强制 icons
容器的宽度小于社交图标的总宽度。删除 .icons
上的宽度。
最后,您不能在同一规则中同时使用 display: inline-block
和 float: left
,因此请选择一个。在我为您制作的 codepen 中,我选择了 inline-block
但 float: left
的效果相同。您已经在使用 FontAwesome,所以我将您的图像更改为字体集提供的品牌图标。
here's a codepen with the code in it .如果您需要进一步帮助解决您的具体问题,请告诉我。
关于javascript - 导航栏中的水平图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32020166/