html - 为什么列表在下一行？

Question

我的问题很简单:为什么我使用了inline-block作为显示方式，但列表中的元素与logo不在同一行？

HTML:

 <div class="header">

  <div class="logo"><span id="logo-text">Logo</span></div>

  <div class="menu">    
    <ol class="menu-list">
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>    
    </ol>  
  </div>

</div>

CSS:

* {
   margin: 0;
   padding: 0;
}

.header {
  width: 100%;
  background-color: grey;
}

.logo {
  display: inline-block;
}

.menu-list {
  display: inline-block;
  float: right;
  list-style: none;
}

.menu-list li {
  display: inline-block;
  float: left;
  margin-right: 1em;
}

在线编辑器:

CodePen

Answer 1

将 display: inline-block 添加到 .menu。