影响导航栏中对齐的图像

Question

我试图制作带有图像的导航栏，但我遇到了影响导航栏中其他元素对齐的图像问题。我无法获得与页面顶部齐平的链接。如果删除图像则没有问题。

＆＃13;

＆＃13;

<div class="navbar-wrapper">
  <img class="logo" src="https://image.ibb.co/cVNZww/logo.jpg">
  <ul class="link-group-wrapper">
    <li class="link-wrapper">
      <a class="link" href="">Roster</a>
    </li>
    <li class="link-wrapper">
      <a class="link" href="">Roster</a>
    </li>
    <li class="link-wrapper">
      <a class="link" href="">Roster</a>
    </li>
  </ul>
</div>

＆＃13;

post

＆＃13;

＆＃13;

＆＃13;

Answer 1

轻松修复！只需将图像html元素放在导航栏后面，然后使用CSS添加浮动样式（float: left;）

＆＃13;

＆＃13;

.logo {
  max-height: 80px;
  border-radius: 80px;
}

.link-group-wrapper {
  display: inline;
  margin: 0;
  padding: 0;

}

.link-wrapper {
  list-style: none;
  text-align: center;
  font-size: 1.2em;
  background-color: #0b215c;
  width: 120px;
  display: inline-block;
  height: 90px;
  line-height: 90px;
}

.link {
  color: white;
  display: block;
  text-decoration: none;


}

＆＃13;

<div class="navbar-wrapper">
  <ul class="link-group-wrapper">
    <li class="link-wrapper">
      <a class="link" href="">Roster</a>
    </li>
    <li class="link-wrapper">
      <a class="link" href="">Roster</a>
    </li>
    <li class="link-wrapper">
      <a class="link" href="">Roster</a>
    </li>
  </ul>
<img class="logo" style="float: left; "src="https://image.ibb.co/cVNZww/logo.jpg">
</div>

＆＃13;

＆＃13;

＆＃13;