Html webshop上的导航问题

我有点问题，我已经被困了2-3个小时了。我正在Tictail（电子商务网站）做一个设计，我想在导航栏上有一个Facebook和Instagram的标志。如下图所示，徽标拒绝与导航中的文本对齐。我可以在文字上方或下方使用徽标，这让我发疯

这就是CSS如何寻找导航

---

我希望有人能帮助我，我不知道我是否有点漫不经心，如果是，请让我知道，我会尝试更好地解释

每个li中只有一个超链接，因此：

#main_navigation a {
    display: inline-block;
}

不妨是：

#main_navigation a {
    display: block;
}

李应该排队：

#main_navigation li {
  display:inline-block;
}

把你的每一个都放进一个li

更改此项：

    </li>
   <img src="http://i.imgur.com/JvXEXcC.png" alt="{{store_name}}" 

height="25" width="25" align="right"><img src="http://i.imgur.com/uUiJzIo.png" alt="{{store_name}}" height="25" width="25" align="right">
    </ul>

为此：

</li>
   <li><img src="http://i.imgur.com/JvXEXcC.png" alt="{{store_name}}" height="25" width="25" align="right"></li>

   <li><img src="http://i.imgur.com/uUiJzIo.png" alt="{{store_name}}" height="25" width="25" align="right"></li>
</ul>

我在这里做了几件事：

• 制作一个无序列表并内联列表项
• 使线条高度等于图标高度，然后文本将自动与图标居中
• 从文本链接中删除多余的填充，这样它就不会占用更多的空间（请参见上面的线条高度点）

/*******************************
航行
****************************** */
#主导航{
列表样式：无；
}
#主导航李{
边际：0像素；
字体大小：11px；
线高：25px；
字号：；
文本转换：大写；
浮动：左；
显示：INININE块；
}
#主导航系统{
高度：25px；
宽度：25px；
}
#主导航a{
显示：内联块；
颜色：#000；
}
#主导航。选择了一个{
颜色：#D0D1D0；
}
#主导航。子导航a{
颜色：#908f94；
}
#主导航a:悬停{
颜色：#D0D1D0；
}

---

html的顶部被切掉了，我看不见。你能给元素一个填充顶部，使其垂直对齐吗？如果没有：请向我们提供JSFIDLE。我们在这里总是很懒：）我忘了说我是这方面的新手：）我现在编辑了问题并添加了完整的导航代码，但我不知道这是否重要？对不起，什么是JSFIDLE？请检查我添加的图片。他们排好了队，但不知怎的一切都搞砸了。对不起，我不知道你的意思。你看到我贴的照片了吗？网站上的一切都崩溃了。首页上的内容出现在导航旁边，导航变得一团糟。不要只是复制和粘贴我发布的代码，而是使用我提供给您的概念来解决您的问题。因为我没有你所有的代码，所以你可以将我的答案集成到你的解决方案文件中。你理解我在回答中提到的概念吗？我理解第二点，但其余的对我来说也可能是中国的。“制作一个无序的列表并内联列表项”-你是说导航中的所有选项？这不起作用，卡罗尔，请看我发布的图片。您还有其他建议吗？您需要在列表项上设置宽度或最小宽度Show我可以这样做吗？我通过使用CSS实现了这一点，但当我制作图像链接时，它们就搞砸了。

    </li>
   <img src="http://i.imgur.com/JvXEXcC.png" alt="{{store_name}}" 

height="25" width="25" align="right"><img src="http://i.imgur.com/uUiJzIo.png" alt="{{store_name}}" height="25" width="25" align="right">
    </ul>

</li>
   <li><img src="http://i.imgur.com/JvXEXcC.png" alt="{{store_name}}" height="25" width="25" align="right"></li>

   <li><img src="http://i.imgur.com/uUiJzIo.png" alt="{{store_name}}" height="25" width="25" align="right"></li>
</ul>