如何将图片放在导航栏的左侧？

Question

How to put the picture in the left side of my navbar? I can't seem to understand how it works- the picture is going up and the navbar is outside the div.

 body { margin: 0; } #navbar { background-color: gray; width: 100%; height: 160px; } #logo { width: 50%; height: 50%; } ul { list-style: none; background-color: red; margin: 0; padding: 0; text-align: center; overflow: hidden; } #navbar li { display: inline; } #navbar li a { display: inline-block; padding: 10px; font-size: 20px; text-decoration: none; } 

 <div class="container"> <div id="navbar"> <img class="logo" src="logo.gif"> <ul> <li><a href="#none">Home</a></li> <li><a href="#none">Game Info</a></li> <li><a href="#none">Gameplay</a></li> <li><a href="#none">Media</a></li> </ul> </div> </div> 

Answer 1

use this code

#navbar{
    position: absolute;
    right: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

Answer 2

In the case you want to use flexbox, you may try this:

 favorite body { margin: 0; } #navbar { background-color: gray; width: 100%; height: 160px; /*****************/ display:flex; justify-content:space-between; align-items:center; /*****************/ } #logo { width: 50%; height: 50%; } ul { list-style: none; background-color: red; margin: 0; padding: 0; text-align: center; overflow: hidden; } #navbar li { display: inline; } #navbar li a { display: inline-block; padding: 10px; font-size: 20px; text-decoration: none; } 

 <div class="container"> <div id="navbar"> <img width="40" class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/apple.png"> <ul> <li><a href="#none">Home</a></li> <li><a href="#none">Game Info</a></li> <li><a href="#none">Gameplay</a></li> <li><a href="#none">Media</a></li> </ul> </div> </div> 

Answer 3

1-Access class logo by '.'

2-apply positioning to class logo as i applied and set height and width of class

3- set width of also heres my code

 favorite body { margin: 0; } #navbar { background-color: gray; width: 100%; height: 160px; /*****************/ display:flex; justify-content:space-between; align-items:center; /*****************/ } .logo { position :relative; top: 0px; width: 10%; height: 27%; } ul { list-style: none; background-color: red; width: 90%; margin: 0; padding: 0; text-align: center; overflow: hidden; } #navbar li { display: inline; } #navbar li a { display: inline-block; padding: 10px; font-size: 20px; text-decoration: none; } 

 <div class="container"> <div id="navbar"> <img width="40" class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/apple.png"> <ul> <li><a href="#none">Home</a></li> <li><a href="#none">Game Info</a></li> <li><a href="#none">Gameplay</a></li> <li><a href="#none">Media</a></li> </ul> </div> </div> 

down vote favorite body {
  margin: 0;
}

#navbar {
  background-color: gray;
  width: 100%;
  height: 160px;
}

#logo {
  width: 50%;
  height: 50%;
}

ul {
  list-style: none;
  background-color: red;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow: hidden;
}

#navbar li {
  display: inline;
}

#navbar li a {
  display: inline-block;
  padding: 10px;
  font-size: 20px;
  text-decoration: none;
}

<div class="container">
  <div id="navbar"> <img class="logo" src="logo.gif">
    <ul>
      <li><a href="#none">Home</a></li>
      <li><a href="#none">Game Info</a></li>
      <li><a href="#none">Gameplay</a></li>
      <li><a href="#none">Media</a></li>
    </ul>
  </div>
</div>

Answer 4

use this css

   ul {
        list-style: none;
        background-color: red;
        margin: 0;
        padding: 0;
        text-align: center;
        overflow: hidden;
        display: inline-block;
    }