ナビゲーションバーのデバッグ

Question

the text is cascading downwards for unknown reasons

私は高校のWebデザインクラスを取っているし、拡張プロジェクトとして、私はのどレストランの広告ウェブサイトを作成しています。一番上のナビゲーションバーのコーディングは、私が見ることができる限り正確です。先生は、テキストとナビゲーションボックスをどのように中心に、そして隣に置くのかを知りません。すべてのリンクは、彼らがになっているどのように動作し、彼らはちょうど>適切な場所になっていない:( My css code for navigation bar

Answer 1

.topnav aからCSSプロパティfloat: leftを削除し、あなたたちが必要とするよう.topnav lidisplay: inline-block

が鳴る作ります新しい先生笑。しかし一方で、彼はあなたがすてきである、「自分」で問題を見つけることができます。

body { 
 
    background: #2f4f4e; 
 
} 
 

 
.topnav { 
 
    background-color: #333; 
 
    overflow: hidden; 
 
} 
 

 
.topnav li { 
 
    display: inline-block; 
 
} 
 

 
.topnav a { 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 16px 16px; 
 
    text-decoration: none; 
 
    font-size: 20px; 
 
    font-family: Palatino; 
 
} 
 

 
.topnav a:hover { 
 
    background-color: #ddd; 
 
    color: black; 
 
} 
 

 
.topnav a.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
}

<nav class="topnav"> 
 
    <ul> 
 
    <li><a href="#">Takeout Options</a></li> 
 
    <li><a href="#">Kid's Menu</a></li> 
 
    <li><a href="#">Our Mascot</a></li> 
 
    <li><a href="#">Our Founder</a></li> 
 
    <li><a href="#">Back Dumbster: Schedule and Guideline</a></li> 
 
    </ul> 
 
</nav>