Моя панель навигации вертикальная, но не будет горизонтальной.

Question

По какой-то причине у меня возникли проблемы с созданием навигационной панели. Я пробовал смотреть, если что-то здесь отвечает или выходит в интернет, но не повезло. Я что-то упустил или есть конфликт?

 
    html, body { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    
 
    .container { 
 
     max-width: 940px; 
 
     margin: 0 auto; 
 
     padding: 0 10px; 
 
    } 
 
    
 
    
 
    .jumbotron { 
 
     background: url(../img/bg.jpg) no-repeat center center; 
 
     background-size: cover; 
 
     height: 800px; 
 
    } 
 
    
 
    .header { 
 
     background-color: #333; 
 
    } 
 
    
 
    .nav { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 20px 0; 
 
    } 
 
    
 
    .nav li a { 
 
     color: #fff; 
 
     display: inline; 
 
     font-family: 'Raleway', sans-serif; 
 
     font-weight: 600; 
 
     font-size: 12px; 
 
     margin-right: 25px; 
 
     text-transform: uppercase; 
 
    }

<div class="header"> 
 
     <div class="container"> 
 
     <ul class="nav" role="navigation"> 
 
\t \t <li><a href="#">About</a></li> 
 
      <li><a href="#">Photography</a></li> 
 
      <li><a href="#">Programming</a></li> 
 
      <li><a href="#">Writing</a></li> 
 
      <li><a href="#">Reading</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
     </ul> 
 
     </div> 
 
    </div>

Answer 1

Я сделал вам plunker как example. Вы были очень близки. Вам просто нужно установить свойство display на селектор .nav li на inline-block.

.nav li { 
    display:inline-block; 
} 

Плакат фактически искал решение Bootstrap, но не имел вопроса, помеченного как таковой. Вот Bootstrap example. Он просто использует класс pull-left для каждого тега li.

<ul class="nav" role="navigation"> 
    <li class="pull-left"><a href="#">About</a></li> 
    <li class="pull-left"><a href="#">Photography</a></li> 
    <li class="pull-left"><a href="#">Programming</a></li> 
    <li class="pull-left"><a href="#">Writing</a></li> 
    <li class="pull-left"><a href="#">Reading</a></li> 
    <li class="pull-left"><a href="#">Contact</a></li> 
</ul> 

Answer 2

В вашем CSS, попробуйте добавить

.nav li { 
display: inline; 
} 

Ваши Li элементы естественно BLOCK отображается, так что это должно идти вперед и удалить перерывы между ними.

Answer 3

См. Снимок фиксированного кода. Вы должны добавить display: inline; в элементы li, чтобы заставить их идти горизонтально.

li { 
 
     display: inline; 
 
    } 
 

 
    html, body { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    
 
    .container { 
 
     max-width: 940px; 
 
     margin: 0 auto; 
 
     padding: 0 10px; 
 
    } 
 
    
 
    
 
    .jumbotron { 
 
     background: url(../img/bg.jpg) no-repeat center center; 
 
     background-size: cover; 
 
     height: 800px; 
 
    } 
 
    
 
    .header { 
 
     background-color: #333; 
 
    } 
 
    
 
    .nav { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 20px 0; 
 
    } 
 
    
 
    .nav li a { 
 
     color: #fff; 
 
     display: inline; 
 
     font-family: 'Raleway', sans-serif; 
 
     font-weight: 600; 
 
     font-size: 12px; 
 
     margin-right: 25px; 
 
     text-transform: uppercase; 
 
    }

<div class="header"> 
 
     <div class="container"> 
 
     <ul class="nav" role="navigation"> 
 
\t \t <li><a href="#">About</a></li> 
 
      <li><a href="#">Photography</a></li> 
 
      <li><a href="#">Programming</a></li> 
 
      <li><a href="#">Writing</a></li> 
 
      <li><a href="#">Reading</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
     </ul> 
 
     </div> 
 
    </div>

Answer 4

Добавьте атрибут .nav li с встроенным дисплеем.

.nav li{ 
    display: inline; 
}