How do I align a <ul> vertically?

Question

I’m trying to make a website and wanted to align a <ul> vertically. align items does not work but Justify content does

<main>
  <nav>
    <ul class="nav-list">
      <li class="nav-li"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-li"><a class="nav-link" href="#">About us</a></li>
      <li class="nav-li"><a class="nav-link" href="#">Products</a></li>
      <li class="nav-li"><a class="nav-link" href="#">Shopping cart</a></li>
    </ul>
  </nav>
</main>

Answer 1

Hello, given! I suppose you’re writing a pure css ''.

Here’s how to do it very simply.

<style>
  ul.nav-list li.nav-li{
    display: block;
    float: left;

    width: 25%;
  }
</style>

And if you want to go a little deeper and already see about good practices. Here’s a link.

Answer 2

Or else:

 <style>
  li{
      display: inline;
  }
  </style>