带图片的标题 in-line

Question

我想让网站的顶部看起来像这样：

但看起来像这样：

这是代码：

.navigationbar {
  width: 100%;
  height: 11%;
  background-color: #202020;
  padding-top: 0px;
  overflow: hidden;
}
.logo {
  margin-left: 20%;
  height: 85%;
  width: 19.3%;
  margin-top: 8px;
  display: inline-block;
  float: left;
}
.navigationbar ul {} .navigationbar li {
  margin-right: 20%;
  display: inline-block;
  float: left;
  width: 0%;
  vertical-align: middle;
}
.navigationbar li a {
  text-decoration: none;
  display: block;
  color: #FFFFFF;
}

<div class="navigationbar">

  <img src="images/Logo.png" alt="Logo" class="logo">

  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About Me</a>
    </li>
    <li><a href="#">Portfolio</a>
    </li>
    <li><a href="#">Contact Me</a>
    </li>
  </ul>

</div>

忽略其他问题，例如高度和徽标，以及标题的字体。我只是想正确定位它们。

Answer 1

首先，尝试删除浮点数。它们与内联块不兼容，这是执行此操作的方法，因为它支持 vertical-align:middle

我想你已经完成大部分了。

.navigationbar {
  width: 100%;
  height: 11%;
  background-color: #202020;
  padding-top: 0px;
  overflow: hidden;
}
.logo {
  margin-left: 20%;
  height: 85%;
  width: 19.3%;
  margin-top: 8px;
  display: inline-block;
  vertical-align: middle /* line up with other siblings */
}
.navigationbar ul {
  display: inline-block; 
  vertical-align: middle /* now lined up with logo */
}
.navigationbar li {
  display: inline-block;
  padding: 0 10px;
  vertical-align: middle; /* line up the list items */
}
.navigationbar li a {
  text-decoration: none;
  display: block;
  color: #FFFFFF;
}

<div class="navigationbar">

  <img src="images/Logo.png" alt="Logo" class="logo">

  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About Me</a>
    </li>
    <li><a href="#">Portfolio</a>
    </li>
    <li><a href="#">Contact Me</a>
    </li>
  </ul>

</div>

带图片的标题 in-line

Headings in-line with image

html

css

positioning