如何在两列布局中对齐第二列？

Question

我有一个无序列表，其中包含工作时间信息。 它看起来像那样：

以下是我的清单代码：

<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>

我想要做的是将时间与时间保持一致，为此我尝试使用css属性display: flex; justify-content: space-between。

结果并不是我所期望的：

我可以给每个对象留下一个百分比左边的位置，或者使用一些表格或一个常见的左百分比边距，但我想这不是最好的方法。

所以问题是，有没有办法使用css属性flex？

如果是的话，我做错了什么？以前它是在我的班级里面。

我想要的是：

非常感谢任何形式的帮助。

Answer 1

您可以在此处使用CSS表格

＆＃13;

＆＃13;

ul {
  display: table;
  padding: 0;
}
li {
  display: table-row;
}
strong {
  display: table-cell;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

修改：对于该隐藏字段，请使用display: none将其从元素流DEMO中删除