2

I have an unordered list which contains working hours information. It looks like that :

enter image description here

Below is 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 use the CSS property display: flex; justify-content: space-between.

The result is not really what I expect :

enter image description here

I could 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 was inside the class of my ul.

What I would like to have is :

enter image description here

halfer
  • 19,824
  • 17
  • 99
  • 186
Stanislas Piotrowski
  • 2,595
  • 10
  • 40
  • 59
  • You could keep the li as block elements and set a hard width with display:inline-block on the tags. You could also write the markup as a table, as it is tabular data. – iphipps May 08 '16 at 16:10

1 Answers1

2

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

Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
  • 1
    Thank you for your help. All works great. I was thinking that flex would be the best css attribute for that, but your answer worls fine – Stanislas Piotrowski May 08 '16 at 16:19
  • Thank you so much for this one. I was battling li alignment not knowing how to do it and float lefts clearly was not a great idea. Alignment was going all over the place and li bullets appeared everywhere. – Xennex81 Jun 08 '17 at 16:53