탐색 바 디버깅 나는 고등학교 웹 디자인 수업을하고있어 확장 프로젝트로 나는 가짜 레스토랑 광고 웹 사이트를 만드는거야

Question

the text is cascading downwards for unknown reasons

. 상단 네비게이션 바에 대한 코딩은 내가 볼 수있는 한 정확합니다. 선생님은 텍스트와 네비게이션 상자를 가운데에 그리고 서로 옆에 놓는 방법을 알지 못합니다. 너희들이 필요한 것처럼 모든 링크가>, 그들은 단지 바로 이곳에없는에 그들이 생각하고 어떻게 작동 :( My css code for navigation bar

Answer 1

이 .topnav lidisplay: inline-block

을 .topnav a에서 CSS 속성 float: left을 제거하기는 소리 새로운 교사 LOL. 그러나 다른 한편으로는, 그는 당신이 좋은이다, "자신"에 의해 문제를 찾을 수 있습니다.

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>