javascript - 导航栏中的水平图标

Question

我试图在我的导航栏中水平显示三个社交媒体图标，但无论我做什么，它们似乎都显示在另一个下方。为了创建我的导航栏，我使用“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>

Answer 1

所以我不能 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 .如果您需要进一步帮助解决您的具体问题，请告诉我。