将徽标与导航栏对齐

Question

我是网络开发的新手，目前正在尝试获取徽标并列出项目以在标题中彼此对齐。我非常感谢您就如何解决此问题提出建议。

我已经提供了一个参考资料链接。 https://gist.github.com/59c56461658d2011f8fc

非常感谢，

乔什

Answer 1

您的徽标已溢出，因为未设置<img>高度。如果您通过CSS设置高度，它将被限制为其父级（导航栏）的最大高度。您可以通过将以下代码添加到CSS来执行此操作：

.logo img {
  height: 100%;
}

  

JSFiddle：https://jsfiddle.net/Hybridx24/pxd1pjwz/

Answer 2

您没有定义徽标图像最大高度和最大宽度。因此，您的徽标会超出标题部分。

将此css放入您的css文件：

.logo img {
  max-height: 100%;
  max-width:100%;
}

Answer 3

Ok你所要做的就是从float更改导航：right;漂浮：左;

以下是codepen的链接：

<a href="http://codepen.io/HTMLNoob/pen/xZYrpW">Example</a>