How do I properly align li tags on left/right side?

May 2, 2023

I have this nav which has two ul tags. I want one of the ul to appear on the left side of the screen and the other ul to appear on the right side.

I tried using float: right on the second, which sort of worked but 1. I don’t like using float, and 2. It wasn’t aligned properly, so the lines were uneven, and not even line-height was able to fix it.

I’ve been messing around with other displays, but nothing I’m trying has worked.

<nav class="navbar">
  <ul class="navbar__left">
    <li>
      <a href="">Home</a>
    </li>
  </ul>
  <ul class="navbar__right">
    <li>
      <a href="">Register</a>
    </li>
    <li>
      <a href="">Login</a>
    </li>
  </ul>
</nav>

.navbar {
  border: 1px solid black;
  ul {
    display: flex;
    padding: 0;
  }
  li {
    margin: 0 1em;
    list-style-type: none;
  }
  a {
    text-decoration: none;
  }
}

>Solution :

You could use Flexbox to easily achieve the output you are looking for, like below. I converted your SCSS to CSS to have a working example here.

.navbar {
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
}

ul {
  display: flex;
  padding: 0;
}
li {
  margin: 0 1em;
  list-style-type: none;
}
a {
  text-decoration: none;
}

<nav class="navbar">
  <ul class="navbar__left">
    <li>
      <a href="">Home</a>
    </li>
  </ul>
  <ul class="navbar__right">
    <li>
      <a href="">Register</a>
    </li>
    <li>
      <a href="">Login</a>
    </li>
  </ul>
</nav>