CSS spacing between li elements inside a ul list - html

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>
`

Answer 2

Solution 1. Try viewport meta tag to tell the browsers on whichever device to use the same measurements. It maintains the same aspect ratio on all devices.
Solution 2. If solution 1 does not work for you, then try css media queries to make the right spacing on mobile and other screens.

Answer 3

try this:
in css you can apply
*{
margin: 0;
padding: 0;
}
ul
{
text-align: center;
}
ul li
{
list-style: none;
display: inline-block;
padding: 20px;
}
#media(max-width:340px)
{
ul li
{
padding: 15px;
}
}
you will get your li in center of the screen in all the resolution