导航栏中的水平图标

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 不能在同一个规则中，所以选择一个。在我为您制作的代码笔中，我选择了inline-block，但float: left 的工作方式相同。您已经在使用 FontAwesome，所以我将您的图片更改为字体集提供的品牌图标。

here's a codepen with the code in it。如果您需要针对具体问题的进一步帮助，请告诉我。

Answer 2

经过大量的努力，我让它工作了 :) 有两件事导致 display:block 在 icons 类和 max-width:100% 在 icon-list a img 选择器中的麻烦。这是更新的代码：

    .menu, 
.icon-list {
    height: 100%;
}
.icon-list a img {
    max-width:30%;
    margin-left: -5px;
}
.icon-list {
    -webkit-transform: translate3d(0,100px,0);
    transform: translate3d(0,100px,0);
}
.icon-list a {
    /*padding: 0.8em;*/
    display: inline;
    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;
    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>
                                <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>