Javascript 导航栏中的水平图标

我试图在导航栏中水平显示三个社交媒体图标，但无论我做什么，它们似乎都显示在另一个下面。为了创建我的导航栏，我使用了“非画布菜单效果”使其滑入滑出（这将解释一些奇怪的css）。我只在下面的导航栏上发布了html和css，我希望这足以帮助你帮助我lol

菜单，
.图标列表{
身高：100%；
}
.图标列表a img{
最大宽度：100%；
左边距：-5px；
}
.图标列表{
-webkit转换：translate3d（0100%，0）；
转换：translate3d（0100%，0）；
}
.图标列表a{
显示：块；
/*填充：0.8em*/
填充底部：50px；
-webkit转换：translate3d（0500px，0）；
转换：translate3d（0500px，0）；
}
.图标列表，
.图标列表a{
-webkit转换：-webkit转换0s0.4s；
转换：转换0s0.4s；
-webkit过渡计时功能：立方贝塞尔（0.7,0,0.3,1）；
过渡计时功能：立方贝塞尔（0.7,0,0.3,1）；
}
.图标列表a:第n个子项（2）{
-webkit转换：translate3d（01000px，0）；
转换：translate3d（01000px，0）；
}
.图标列表a:第n个子项（3）{
-webkit转换：translate3d（01500px，0）；
转换：translate3d（01500px，0）；
}
.图标列表a:第n个子项（4）{
-webkit转换：translate3d（02000px，0）；
转换：translate3d（02000px，0）；
}
.图标列表a:第n个子项（5）{
-webkit转换：translate3d（02500px，0）；
转换：translate3d（02500px，0）；
}
.图标列表a:第n个子项（6）{
-webkit转换：translate3d（03000px，0）；
转换：translate3d（03000px，0）；
}
.图标列出一个跨度{
字号：700；
}
.图标{
宽度：40px；
高度：40px；
显示：内联块；
浮动：左；
}
.脸谱网{
}
.推特{
}
.linkedin{
}

---

所以我不能100%确定最终结果是什么，但我认为这会有所帮助

首先，

display:block

正是使事物堆叠在一起的原因，所以您肯定不希望这样。将

图标列表中的选择器更改为
显示：内联块

其次，您强制您的
图标的宽度小于社交图标的总宽度。删除
图标上的宽度

最后，您不能在同一规则中使用
显示：内联块
和
浮动：左
，因此请选择一个。在我为您制作的代码笔中，我选择了
inline block
，但
float:left
的工作原理相同。您已经在使用FontAwesome，因此我将您的图像更改为字体集提供的品牌图标

。如果您的具体问题需要进一步帮助，请告诉我。
我费了很大劲才让它工作：）有两件事导致了问题
显示：在
图标
类中阻止
，在
图标列表中最大宽度：100%
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>

菜单，
.图标列表{
身高：100%；
}
.图标列表a img{
最大宽度：30%；
左边距：-5px；
}
.图标列表{
-webkit转换：translate3d（0100px，0）；
转换：translate3d（0100px，0）；
}
.图标列表a{
/*填充：0.8em*/
显示：内联；
填充底部：50px；
-webkit转换：translate3d（0500px，0）；
转换：translate3d（0500px，0）；
}
.图标列表，
.图标列表a{
-webkit转换：-webkit转换0s0.4s；
转换：转换0s0.4s；
-webkit过渡计时功能：立方贝塞尔（0.7,0,0.3,1）；
过渡计时功能：立方贝塞尔（0.7,0,0.3,1）；
}
.图标列表a:第n个子项（2）{
-webkit转换：translate3d（01000px，0）；
转换：translate3d（01000px，0）；
}
.图标列表a:第n个子项（3）{
-webkit转换：translate3d（01500px，0）；
转换：translate3d（01500px，0）；
}
.图标列表a:第n个子项（4）{
-webkit转换：translate3d（02000px，0）；
转换：translate3d（02000px，0）；
}
.图标列表a:第n个子项（5）{
-webkit转换：translate3d（02500px，0）；
转换：translate3d（02500px，0）；
}
.图标列表a:第n个子项（6）{
-webkit转换：translate3d（03000px，0）；
转换：translate3d（03000px，0）；
}
.图标列出一个跨度{
字号：700；
}
.图标{
宽度：40px；
高度：40px；
显示：内联；
浮动：左；
}
.脸谱网{
}
.推特{
}
.linkedin{
}
尝试
display:block
而不是
display:inline block
在
中。icons
类不起作用，已经尝试过：（我明白你的意思，但问题是导航栏是垂直的，所以所有文本都将显示在垂直列表中。但是，我希望图标像这样水平显示[IMG]好的，你应该用
display:block
来表示垂直的东西
display:inline block
来表示水平的东西。原来的代码是这样的，但它不起作用：（在您的原始代码中，
.icons
类有一个规则
宽度：40px
。您怎么能期望在没有空间放置图标的容器中水平放置图标？只需从该类中删除
宽度
属性，或者将其设置为
宽度：100%
您可能指的是
。icons a{width:40px，等等}
，这将选择实际的图标而不是它们的容器。感谢你付出了这么多的努力！！现在图标水平显示，但其他一切都一样，但我希望它看起来像这样，我可以这样做，但为此我需要更改一下你的html:）去做吧哈哈哈，我现在就要放弃了