顯示：內聯不能正常工作與div

Question

我是一個HTML/CSS初學者，目前我正在構建一個簡單的網站。我想要做的是我想製作3個div。一個用於整個站點，一個用於內容，一個用於導航列表 - 行。

它應該是這樣的：

_ _ _ _ _ _（導航列表 - 行）

asdfwefwefwe

cofwerferwefw（內容）

要認識我背景 - 的div爲它們着色。每當我使用display-inline時，它看起來都像這樣。整個網站div（紅色），主要內容（橙色的）

http://puu.sh/iFyeC/a48443bc07.png

當我使用display：inline-block的整個網站div（紅色），主要內容（橙色的），導航列表 - 行（藍色）

http://puu.sh/iFyil/40e73716e7.png

現在，它的工作原理，但我希望有一個導航 - 磁條，而不是排名表，但我不知道該怎麼做。

這裏是我的導航列表中的CSS - 行：

.navigationlist{ 
    height:20%; 
    width:100%; 
    display:inline-block; 
    background-color:blue; 
} 

非常感謝您的閱讀和希望好的答案。

Answer 1

除了用李和UL我會建議您在創建導航欄時使用bootstrap導航欄類。您可以在線閱讀其優勢（http://getbootstrap.com/components/#navbar），並且還可以默認突出顯示其中一個li。在你的情況下，它會是這樣的。

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div> 
      <ul class="nav navbar-nav"> 
       <li><a href="#">Hello</a></li> 
       <li><a href="#">Stack Overflow</a></li> 
       <li><a href="#">World</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

Answer 2

首先，使用首頁，故事，這裏所有在列表標籤​​！

<ul> 
<li>Home</li> 
<li>Story</li> 
<li>Hereos</li< 
...... 
<ul> 

然後風格，那麼元素

​​

你OUT將爲
http://myslambook.pe.hu/demo.png

Answer 3

li { 
 
    display: inline-block; 
 
    border-radius: 5px; 
 
    font-size: 0.4em; 
 
    margin: 1% auto; 
 
    padding: 1%; 
 
    text-align: center; 
 
    border: 2px solid #000; 
 
    background-color: rgba(255, 255, 255, 0.7); 
 
}

<ul> 
 
    <li>Hello</li> 
 
    <li>Stack Overflow</li> 
 
    <li>World</li> 
 
</ul>