爲什麼列表在下一行？

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

，你必須使用這樣的：Demo

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

，而不是這樣的：

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

Answer 2

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

Answer 3

因爲div是塊元素，你需要在.menu DIV添加disply:inline-block或float。

* { 
 
    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; 
 
}

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