Question

我的问题很简单：为什么列表中的项目与徽标不在同一行，尽管我使用内联块作为显示模式？

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。

Answer 2

你必须这样使用： Demo

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

而不是：

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

Answer 3

由于div是块元素，因此您需要在disply:inline-block div中添加float或.menu。

＆＃13;

* {
  margin: 0;
  padding: 0;
}

.header {
  width: 100%;
  background-color: grey;
}

.logo {
  display: inline-block;
}

.menu{
  display:inline-block; /*add this class*/
}

.menu-list {
  display: inline-block;
  float: right;
  list-style: none;
}

.menu-list li {
  display: inline-block;
  float: left;
  margin-right: 1em;
}

＆＃13;

<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>

＆＃13;

为什么列表在下一行？

3 个答案: