CODEWITHSUNDEEP
htmlcssresponsive-designresponsive
user2294434
user2294434

Reputation: 163

CSS spacing between li elements inside a ul list

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>

Upvotes: 3

Views: 9685

Answers (3)

Lucky Yadav
Lucky Yadav

Reputation: 59

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

Upvotes: 0

Deepak Sharma
Deepak Sharma

Reputation: 4170

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>

`

Upvotes: 1

mark kasina
mark kasina

Reputation: 140

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.

Upvotes: 0

Related Questions