ナビゲーションバーが垂直ですが水平にならない

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

私はexampleとしてあなたplunkerを作りました。あなたはとても近くにいた。 .nav liセレクタのdisplayプロパティをinline-blockに設定するだけで済みます。

.nav li { 
    display:inline-block; 
} 

ポスターは実際にはブートストラップソリューションを探していましたが、そのようなタグが付いていませんでした。ここにブートストラップexampleがあります。各liタグでpull-leftクラスを使用するだけです。あなたのCSSで

<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

、

.nav li { 
display: inline; 
} 

を追加してみてくださいあなたのli要素は、自然に表示されたブロックされているので、これは先に行くと、それらの間でから改行を削除する必要があります。

Answer 3

固定コードスニペットをご覧ください。 li要素にdisplay: inline;を追加して水平にする必要があります。

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