Nav bar styling-CodePudding

i want to add image on left and list item on right, how to use flex for both please hep me out

<nav>
  <div >
    
    <img src="assets/shared/logo.svg" alt="" />


   
    <ul>
      <li><a href=""> 00 Home</a></li>
      <li><a href=""> 01 Destination</a></li>
      <li><a href=""> 02 Crew</a></li>
      <li><a href=""> 03 Technology</a></li>
    </ul>
  
  </div>
</nav>

CodePudding user response：

.logo{
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
}

Try this it should work for what your after With your current code. or if you move the closing tag of your div then just add the same css to the nav element instead, like this `

<nav>
  <div >
    <img src="../assets/home-icon.svg" alt="" />
  </div>
  <ul>
    <li><a href=""> 00 Home</a></li>
    <li><a href=""> 01 Destination</a></li>
    <li><a href=""> 02 Crew</a></li>
    <li><a href=""> 03 Technology</a></li>
  </ul>
</nav>

and then css to this

 nav{
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
}

CodePudding user response：

Try using the following code and feel free to change the dynamics.

HTML:

<nav>
    <div >
      
      <img src="assets/shared/logo.svg" alt="image" />
           
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Destination</a></li>
        <li><a href="">Crew</a></li>
        <li><a href="">Technology</a></li>
      </ul>
    
    </div>
  </nav>

CSS:

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

li a {
    display: block;
    color: black;
    text-align: center;
    padding-left: 21px;
    text-decoration: none;
  }

.logo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 30px;
}