Stanislas Piotrowski Stanislas Piotrowski - 6 months ago 12
HTML Question

How to set same space between elements

I have a list unstyled which contains working hours information.
It look like that :

enter image description here

Nelow the code of my list :

<ul class="list-unstyled margin-bottom-30" >
<li><strong>Lundi au Vendredi :</strong> 08h30 - 12h00 <br>
<strong style="visibility:hidden">Lundi au Vendredi :</strong> 13h00 - 17h30</li>
<li><strong>Samedi :</strong><span style="width:25px">&nbsp;</span>09h00 - 12h00</li>
<li><strong>Dimanche :</strong> Fermé</li>
</ul>


What I want to do is to put time aligned to time, and for that I tried to used the css property
display: flex;justify-content: space-between


the result is not rally what I expect :

enter image description here

I could use Give each object a percentage left position, or use some table or a common left percentage margin but I guess this is not the best way to do.

So the question is, is there a way to do that using the css property
flex


If yes, what am I doing wrong ? Previously it wa inside the class of my ul.

What I would like to have is :

enter image description here

Anykind of help will be much appreciated

Answer

You can use CSS tables here

ul {
  display: table;
  padding: 0;
}
li {
  display: table-row;
}
strong {
  display: table-cell;
}
<ul class="list-unstyled margin-bottom-30">
  <li><strong>Lundi au Vendredi: </strong> 08h30 - 12h00 <br> 13h00 - 17h30</li>
  <li><strong>Samedi: </strong><span style="width:25px"></span>09h00 - 12h00</li>
  <li><strong>Dimanche: </strong> Fermé</li>
</ul>

Edit: For that hidden field use display: none to remove it from elements flow DEMO

Comments