justify-content가있는 플렉스 항목 : 사이의 공백이 올바르게 표시되지 않습니다.

Question

하위 메뉴가있는 메뉴 모음이 있습니다. 나는 메뉴와 같은 줄에 오른쪽의 "Account"또는 "Profile"링크를 원한다. 나는 순수한 CSS3/Flex로 그것을하고 싶다.

하지만 내 링크 코드 ("계정")가 주 메뉴 아래에서 표시되기 때문에 내 CSS 코드에 문제가있는 것 같아서 내 justify-content: space-between의 nav 요소가 작동하지 않습니다. 내가 어떻게 해 ? 여기

내 코드 :

nav { 
 
    font-size: 20px ; 
 
    background-color: white; 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
} 
 

 
nav ul { 
 
    display: flex; 
 
    flex-direction: row; 
 
    margin: 0; 
 
    padding: 0 ; 
 
    position: absolute; 
 
    background-color: white; 
 
    list-style-type: none; 
 
} 
 

 
nav ul li { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
nav ul li ul { 
 
    display: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    box-shadow: 3px 3px 3px 0px #DDDDDD; 
 
    background-color: white; 
 
} 
 

 
nav ul li:hover ul{ 
 
    display: block; 
 
} 
 

 
nav a { 
 
    color: #333; 
 
    display: block; 
 
    margin: 0; 
 
    padding: 10px 20px; 
 
    text-decoration: none; 
 
} 
 

 
nav a:hover { 
 
    background-color: #DDD; 
 
}

<nav> 
 
    <ul> 
 
     <li><a href="#">Menu1</a> 
 
      <ul> 
 
       <li><a href="#">Submenu</a></li> 
 
       <li><a href="#">Another longer submenu here</a></li> 
 
       <li><a href="#">Yet another submenu</a></li> 
 
       <li><a href="#">Etc. etc.</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Menu2</a></li> 
 
     <li><a href="#">Menu3</a> 
 
      <ul> 
 
       <li><a href="#">My submenu 1</a></li> 
 
       <li><a href="#">My submenu 2</a></li> 
 
       <li><a href="#">My submenu 3</a></li> 
 
       <li><a href="#">My submenu 4</a></li> 
 
       <li><a href="#">My submenu 5</a></li> 
 
       <li><a href="#">My submenu 6</a></li> 
 
       <li><a href="#">My submenu 7</a></li> 
 
       <li><a href="#">My submenu 8</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Menu4</a> 
 
     </li> 
 
    </ul> 
 
    <a href="#">Account</a> 
 
</nav>

Answer 1

OK, 난 그냥 내 오류를 발견했습니다.

nav ul { position: absolute; } 

여기 여기 positionned하지만해서는 안 :

nav ul li ul { position: absolute; } 

그래서 조각은 고정 (그것은 다른 사람을 도울 수있는 희망이)

nav { 
 
    font-size: 20px ; 
 
    background-color: white; 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
} 
 

 
nav ul { 
 
    display: flex; 
 
    flex-direction: row; 
 
    margin: 0; 
 
    padding: 0 ; 
 
    background-color: white; 
 
    list-style-type: none; 
 
} 
 

 
nav ul li { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
nav ul li ul { 
 
    display: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    box-shadow: 3px 3px 3px 0px #DDDDDD; 
 
    background-color: white; 
 
    position: absolute;   
 
} 
 
nav ul li:hover ul{ 
 
    display: block; 
 
} 
 

 
nav a { 
 
    color: #333; 
 
    display: block; 
 
    margin: 0; 
 
    padding: 10px 20px; 
 
    text-decoration: none; 
 
} 
 

 
nav a:hover { 
 
    background-color: #DDD; 
 
}

<nav> 
 
    <ul> 
 
     <li><a href="#">Menu1</a> 
 
      <ul> 
 
       <li><a href="#">Submenu</a></li> 
 
       <li><a href="#">Another longer submenu here</a></li> 
 
       <li><a href="#">Yet another submenu</a></li> 
 
       <li><a href="#">Etc. etc.</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Menu2</a></li> 
 
     <li><a href="#">Menu3</a> 
 
      <ul> 
 
       <li><a href="#">My submenu 1</a></li> 
 
       <li><a href="#">My submenu 2</a></li> 
 
       <li><a href="#">My submenu 3</a></li> 
 
       <li><a href="#">My submenu 4</a></li> 
 
       <li><a href="#">My submenu 5</a></li> 
 
       <li><a href="#">My submenu 6</a></li> 
 
       <li><a href="#">My submenu 7</a></li> 
 
       <li><a href="#">My submenu 8</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Menu4</a> 
 
     </li> 
 
    </ul> 
 
    <a href="#">Account</a> 
 
</nav>