Align image to left and navbar to right-CodePudding

I need to have image on left side and navbar on right side... but the navbar must be vertically centered with image.. On jsfiddle I made it up to set navbar vertically to center but I am not able to put it on the right side... I will be glad for any help.

JSFiddle: https://jsfiddle.net/polluxik/0Lqubpe6/20/

ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  align-items: center;
}

ul img {
  height: 100px;
}

li a {
  display: block;
  color: #262353;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

<ul>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/640px-Google_Images_2015_logo.svg.png">
  <li><a  href="#">test</a></li>
  <li><a href="#">test2</a></li>
  <li><a href="#">test3</a></li>
  <li><a href="#">test4</a></li>
</ul>

*in jsfiddle I used random image from google as a placeholder

CodePudding user response：

One approach is below, with corrected HTML (the only valid child of a <ul> or <ol> is an <li>, so the <img> is now appropriately wrapped):

ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  align-items: center;
  
  /* aligning the content of the <ul> to the end
     of the inline axis: */
  justify-content: end;
}

ul img {
  height: 100px;
}

li a {
  display: block;
  color: #262353;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li:first-child {
  /* setting the margin of the inline-end of the
     first-child <li> element to 'auto', in order
     to push the first-child away from the rest of
     the content: */
  margin-inline-end: auto;
}

<ul>
  <!-- wrapped the <img> in another <li> element for validity: -->
  <li><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/640px-Google_Images_2015_logo.svg.png"></li>
  <li><a  href="#">test</a></li>
  <li><a href="#">test2</a></li>
  <li><a href="#">test3</a></li>
  <li><a href="#">test4</a></li>
</ul>

JS Fiddle demo.

References:

CodePudding user response：

We can define the image and navbar items in different div and then using flexbox we can align the two div horizontally using justify-content:space-between.

ul {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  align-items: center;
}

.nav {
  display: flex;
  gap: 10px;
}

ul img {
  height: 50px;
}

<ul>
  <div class='logo'>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/640px-Google_Images_2015_logo.svg.png">
  </div>
  <div class='nav'>
    <li><a  href="#">test</a></li>
    <li><a href="#">test2</a></li>
    <li><a href="#">test3</a></li>
    <li><a href="#">test4</a></li>
  </div>
</ul>