CSS spacing between li elements inside a ul list

user_2294434 0
Viewed 1857

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>

responsive-design responsive css html
3 Answers

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

enter image description here

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>

`

user_20731140

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.

user_44318500

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

user_144313630
Related