Html Question posted in
Some basic documentation can be found here.

Html – CSS to align ul menu to the right inside flexbox

My codepen has a logo image on the left and ul menu on the right – after the menu finishes there is empty space to the right of the menu – how do I tell the menu to align to the right so that the empty space is to the left of the menu?

I have tried various things which have not worked such as

.flexbox-1-4 {
  border:2px solid red;
  display:flex;
  align-items: center;
  padding:4px;
  justify-content:space-between; 
}

.left {
  flex:1;
   border:2px solid pink;
}
.right {
  flex:4;
  border:1px solid lime;
}

ul { 
  list-style:none;
  border:2px solid cyan;
  display:inline-block;
}

ul li {
  display: inline-block;
padding-right:18px;
}
<div class="flexbox-1-4">
  <div class="left">
    <img src="https://upload.wikimedia.org/wikipedia/commons/7/7d/Wikimedia-logo-200px-transparent.png" width=100px>
  </div>
   <div class="right">
 <ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
   <li>Water</li>
   <li>Orange</li>
</ul>
    </div>
   </div>
Tags:

2

Answers


  1. 0

    What you need to do is something like this:

    .flexbox-1-4 {
  border:2px solid red;
  display: flex;
  align-items: center;
  padding: 4px;
}

.left {
  border: 2px solid pink;
}

.right {
  flex: 1; /* Adjusted to occupy remaining space */
  border: 1px solid lime;
  display: flex; /* Added to align items inside .right */
  justify-content: flex-end; /* Align items to the right */
}

ul {
  list-style: none;
  border: 2px solid cyan;
  display: inline-block;
}

ul li {
  display: inline-block;
  padding-right: 18px;
}
    <div class="flexbox-1-4">
  <div class="left">
    <img src="https://upload.wikimedia.org/wikipedia/commons/7/7d/Wikimedia-logo-200px-transparent.png" width="100px">
  </div>
  <div class="right">
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
      <li>Water</li>
      <li>Orange</li>
    </ul>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    I recommend to you this game, so, you will never have problems with flexbox again https://flexboxfroggy.com/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search