CSS spacing between li elements inside a ul list

Question

I have a ul list like below. I want to make equal space between each li elements, in all viewports - desktops/ mobile/ table. I had give padding-right for the icons inside the li, but this does break when seen in other resolutions (like mobile). How to give equal ideal spacing between the li elements in all the resolutions?

I want the horizontal list of li elements to be center-aligned and equally spaced on whichever screen (desktop/ phone/ tablet)

<ul class="navbar-nav navbar-right">
<li class="dropdown">
<a href="javascript:void(0);">
<img src="1.svg" class="imgicon">
<span class="username">li 1</span>
</a>
</li>

<li class="dropdown" id="li2" >
<a href="javascript:WindowLocation('/123');">
<img src="2.svg" class="imgicon">
 <span class="hidden-xs">li 2</span>
</a>
</li>

<li class="dropdown" id="li3" >
<a href="javascript:WindowLocation('/123');">
<img src="3.svg" class="imgicon">
 <span class="hidden-xs">li 3</span>
</a>
</li>

<li class="dropdown" id="li4" >
<a href="javascript:WindowLocation('/123');">
<img src="4.svg" class="imgicon">
 <span class="hidden-xs">li 4</span>
</a>
</li>

</ul>

Answer 1

as @Laif suggested you can try the flexbox. Flex can does exactly what you are asking for.

Notice the below code. it has 4 li inside ul and we have space between all li.

on mobile it will look like

ul {
  display:flex;
  list-style:none;
  padding: 0px;
  justify-content: space-between;
}
li{
  border:1px solid grey;
  padding:5px 10px;
}

<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>

`