Navbarのリンクを垂直に配置するにはどうすればよいですか？

Question

ナビゲーションバーを作成しようとしていますが、liとaというタグを垂直に並べる方法がわかりません。これどうやってするの？一般的な方法の

#navbar { 
 
    font-weight: bold; 
 
    display: block; 
 
    background-color: #000; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #000; 
 
} 
 

 
li a { 
 
    color: white; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
}

<div id="navbar"> 
 
     <ul> 
 
      <li><img src="img/logo.png" width="75" height="75"></li> 
 
      <li><a href="#">HOME</a></li> 
 
      <li><a href="#">MY WORK</a></li> 
 
      <li><a href="#">HIRE ME</a></li> 
 
      <li><a href="#">PROJECTS</a></li> 
 
     </ul> 
 
    </div>

Answer 1

一つ、今日フレキシボックスでそれを行うことです：縦[の

#navbar { 
 
    font-weight: bold; 
 
    display: block; 
 
    background-color: #000; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
ul { 
 
    display: flex; /* added */ 
 
    align-items: center; /* added/vertical alignment */ 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #000; 
 
} 
 

 
li a { 
 
    color: white; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
}

<div id="navbar"> 
 
    <ul> 
 
    <li><img src="img/logo.png" width="75" height="75"></li> 
 
    <li><a href="#">HOME</a></li> 
 
    <li><a href="#">MY WORK</a></li> 
 
    <li><a href="#">HIRE ME</a></li> 
 
    <li><a href="#">PROJECTS</a></li> 
 
    </ul> 
 
</div>