Kevin Powell - Community•2y ago

List tabulation

As part of a site I am working on, I have a list of articles that have a date and a headline. The structure looks like so:

<ul>
    <li>
        <time datetime=…>DATE HERE</time>
        <a href=…>HEADLINE HERE</a>
    </li>
    …
</ul>

<ul>
    <li>
        <time datetime=…>DATE HERE</time>
        <a href=…>HEADLINE HERE</a>
    </li>
    …
</ul>

…and my styling is like so:

li time {
        margin-inline-end: 1em;
}

li time {
        margin-inline-end: 1em;
}

The issue I am facing is that while I have a nice gap between the date and the headline, I would really like to have the headlines aligned with each other. In other words, I would need some kind of variable margin between the date and the headline so that I have a gap between them, but that a shorter date has a larger gap to keep all the headlines aligned. Anyone know how to do this?

7 Replies

CodeNascher•2y ago

i'd suggest using a <table> element. you want tabular data. so, not only is the <table> the semantically correct tag IMO, but it should also fix your problem

<table>
   <tr>
      <td>
         <time>123444</time>
      </td>
      <td><a href="">heading1</a></td>
   </tr>
   <tr>
      <td>
         <time>12434</time>
      </td>
      <td><a href="">heading2</a></td>
   </tr>
   <tr>
      <td>
         <time>125555534</time>
      </td>
      <td><a href="">heading3</a></td>
   </tr>
</table>

<table>
   <tr>
      <td>
         <time>123444</time>
      </td>
      <td><a href="">heading1</a></td>
   </tr>
   <tr>
      <td>
         <time>12434</time>
      </td>
      <td><a href="">heading2</a></td>
   </tr>
   <tr>
      <td>
         <time>125555534</time>
      </td>
      <td><a href="">heading3</a></td>
   </tr>
</table>

CodeNascher•2y ago

CodeNascher•2y ago

just add a margin on the <time> or <a> tag to get the spacing you want

Chris Bolson•2y ago

Alternatively you could give the <time> tag a display of inline-block and give it a width.

Mango ManOP•2y ago

The idea of a table came to mind, but then I don’t have the list markers anymore and while I can get around that with tr::before, I’d end up with inconsistent markers since I don’t think I can use the exact same marker with just content

Jochem•2y ago

if all you're worried about is the marker being consistend, you can use ::marker to just replace the bullet to something you can put in content https://developer.mozilla.org/en-US/docs/Web/CSS/::marker also, this feels cursed, and I'm completely unsure about the a11y implications, but you can technically set display: list-item on time, and it'll get the same disc marker: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#try_it

Only a few elements (<li> and <summary>) have a default value of display: list-item. However, the list-style-type property may be applied to any element whose display value is set to list-item. Moreover, because this property is inherited, it can be set on a parent element (commonly <ol> or <ul>) to make it apply to all list items.

There's no specific concerns listed on the MDN article for display-listitem: https://developer.mozilla.org/en-US/docs/Web/CSS/display-listitem And it does Just Work™️: https://codepen.io/jochemm/pen/vYQaaWq

Mango ManOP•2y ago

Ah that works, thanks!

Gaming

Programming

List tabulation