display: inline не работает должным образом с div

Question

Я начинающий HTML/CSS, и в настоящее время я строю простой веб-сайт. Я хочу сделать это, я бы хотел сделать 3 div. Один для всего сайта, один для контента и один для списка навигации - строка.

Он должен выглядеть следующим образом:

_ _ _ _ _ _ (список навигации - строка)

asdfwefwefwe

cofwerferwefw (содержание)

Признать дивы I background- покрасили их. Всякий раз, когда я использую display-inline, он выглядит так. Весь сайт ДИВ (красный цвет), основное содержание (оранжевый цвета)

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

Когда я использую дисплей: встроенный блок всего сайт DIV (красный цвет), основное содержание (оранжевый цвет), список навигации - строка (синего цвета)

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

Сейчас он работает, но я хочу навигации - бар строки и не ранжированный список, но я не знаю, как это сделать.

Вот мой CSS для списка навигации - строка:

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

Большое спасибо за чтение и, надеюсь, хорошие ответы.

Answer 1

Помимо использования литиево и уль я предлагайте вам использовать класс навигационного навигатора каждый раз, когда вам нужно создавать панели навигации. Вы можете прочитать о своих преимуществах онлайн (http://getbootstrap.com/components/#navbar), а также позволит вам выделить один из ликов по умолчанию. В вашем случае это будет что-то вроде.

<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

Во-первых, использование Home, Story, Hereos Все в списке!

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

И затем Стиль Тогда элемент

li 
{ 
display:inline; 
padding:10px; 
} 

Ваш 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>