How to get the contents of a list item to line up vertically?

January 1, 2022

I like to use list items to list out the contents of a structure, though I’m frustrated by the fact the different elements don’t line up. Is there a way in CSS to space the items out uniformly?

<ul class="buses">
  <li>
    <time>-26s</time>
    <time>10m</time>
    <time>21m</time>
  </li>

  <li>
    <time>-10s</time>
    <time>13m</time>
    <time>35m</time>
  </li>

  <li>
    <time>-8s</time>
    <time>14m</time>
    <time>25m</time>
  </li>

  <li>
    <time>2m</time>
    <time>18m</time>
    <time>40m</time>
  </li>

</ul>

The original MIT source is https://github.com/kaihendry/ltabus/blob/master/static/index.html#L110

>Solution :

a table layout

.buses {
 display:table;
}
.buses li {
 display:table-row;
}
.buses time {
 display:table-cell;
 padding:2px 5px;
}

<ul class="buses">
  <li>
    <time>-26s</time>
    <time>10m</time>
    <time>21m</time>
  </li>

  <li>
    <time>-10s</time>
    <time>13m</time>
    <time>35m</time>
  </li>

  <li>
    <time>-8s</time>
    <time>14m</time>
    <time>25m</time>
  </li>

  <li>
    <time>2m</time>
    <time>18m</time>
    <time>40m</time>
  </li>

</ul>