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

user_4534 0
Viewed 25

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?

enter image description here

<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

css
1 Answers

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>

user_86203330
Related