1

So I have the following scenario where i have a list (can be anything else, i don't really care) that has to have the same spacing between them(green lines) and the same spacing at the beginning and end (red arrows). All this without the container having a fixed position, so if I resize and/add more elements they should still span properly.

I have created a pen with what i "achieved" so far.

enter image description here

This is my code so far:

ul{
  width: 90%;
  border: 1px solid black;
}

li{
  display: inline-block;
  margin: 0 100px;

  border:1px solid orangered;
}
li:first-child{
  margin-left: 20px;
}

li:last-child{
  margin-right: 20px;
}

I have also tried with display:grid, they fit properly in the red margins, but don't span equal spacing in between them.

Can this be achieved without the use of JS?

Johannes
  • 64,305
  • 18
  • 73
  • 130
amarui
  • 57
  • 1
  • 7

2 Answers2

4

You can use display: flex and justify-content: space-around on the ulelement

ul{
  width: 100%;
  justify-content: space-around;
  display: flex;
  list-style: none;
  padding: 0;
}

li{
  border: 1px solid red;
  padding: 0;
}
<ul>
  <li>list element 1</li>
  <li>element 2</li>
  <li>e4</li>
  <li>list e5</li>
</ul>
Johannes
  • 64,305
  • 18
  • 73
  • 130
  • Thank you very much Johannes, you comment lead me to the right thing! I ended up using _justify-content: space-between_ and adding a padding to the _ul_. It's exactly what i wanted. – amarui Aug 11 '17 at 11:35
1
ul{
    padding-left: 20px;
    padding-right: 20px;
}
li{
    display: inline-block;
    padding-left: 100px;
    padding-right: 100px;
}
li:first-child{
    padding-left: 0px;
}
li:last-child{
    padding-right: 0px;
}

Try it :)

Himanshu Bansal
  • 2,003
  • 1
  • 23
  • 46