Question 391609 in Html Question posted in
Some basic documentation can be found here.

Best way to create a list with dates in html

I would like to create a list in HTML that looks like

2024: Short announcement

2025: Long announcement that goes to over to the next line, it has
and may have multiple sentences.

My naïve HTML attempt:

<ul>
  <li> 2023: Short announcement </li>
  <li> 2025: Long announcement that goes to over to the next line, it has <br> and may have multiple sentences. <br> More text and some more text and so on. </li>
</ul>

My problem is that "More" appears directly under 2025 while I want it to make it appear under "Long". One workaround is to use multiple nbsp; but that seems wrong. Any suggestions?

If it can’t be done with pure HTML I can use CSS (so I am adding the tag) but I cannot use JS.

Edit: Dates are actually not consecutive so tricks based on that will not work.

Tags:

7

Answers


  1. 0

    You can achieve the desired list layout with pure HTML by using the <dl> element, which is suitable for pairing terms with their descriptions.

    <dl>
  <dt>2024:</dt>
  <dd>Short announcement</dd>
  <dt>2025:</dt>
  <dd>Long announcement that goes to over to the next line, it has and may have multiple sentences.</dd>
  <dd>More text and some more text and so on.</dd>
</dl>

    You can use CSS to style the list items. You can use a combination of display: flex; and flex-wrap: wrap; to allow the items to flow to the next line while aligning properly.

    ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  margin-bottom: 10px; 
}

.year {
  min-width: 50px; 
  font-weight: bold;
}

li .year::after {
  content: ' ';
}
    <ul>
  <li><span class="year">2024:</span> Short announcement</li>
  <li><span class="year">2025:</span> Long announcement that goes over to the next line, it has and may have multiple sentences. More text and some more text and so on.</li>
</ul>
    Login or Signup to reply.
  2. 0

    You can achieve this by adding some CSS to your list.

    Here’s how:

    .announcement-list {
  list-style-type: none;
  padding-left: 0;
}

.announcement-list li {
  position: relative;
  padding-left: 60px;
  margin-bottom: 10px;
}

.announcement-list li::before {
  content: attr(data-year) ": ";
  position: absolute;
  left: 0;
}
    <ol class="announcement-list">
  <li data-year="2024">Short announcement</li>
  <li data-year="2025">Long announcement that goes to over to the next line, it has and may have multiple sentences. More text and some more text and so on.</li>
</ol>
    Login or Signup to reply.
  3. 0

    Use display: grid with grid-template-columns: subgrid:

    ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: max-content auto;
}

li {
  display: grid;
  grid-column: span 2;
  grid-template-columns: subgrid;
  gap: .4rem;
}
    <ul>
  <li><span>2024:</span> Short announcement</li>
  <li><span>2025:</span> Long announcement that goes over to the next line, it has and may have multiple sentences. More text and some more text and so on.</li>
</ul>
    Login or Signup to reply.
  4. 0

    You can accomplish this with a custom start value and a custom counter style. Your requirements aren’t clear, though, as I’m not sure if you’ll have multiple items with the same integer value, etc.

    If you need specific integers, I recommend the approach by Petros.

    Note that this approach has accessibility and SEO concerns, considering the content that’s not represented in the DOM.

    @counter-style paren-decimal {
  system: extends decimal;
  suffix: "  ";
}

.date-list li {
  list-style: paren-decimal;
}
    <ol start="2024" class="date-list">
  <li>Short announcement </li>
  <li>Long announcement that goes to over to the next line, it has <br> and may have multiple sentences. <br> More text and some more text and so on. </li>
  <li>Short announcement </li>
  <li>Short announcement </li>
</ol>
    Login or Signup to reply.
  5. 0

    Just use flexbox on the li with the date in a span.

    ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  display: flex;
  gap: .5em;
}
    <ul>
  <li><span>2024:</span> Short announcement</li>
  <li><span>2025:</span> Long announcement that goes over to the next line, it has and may have multiple sentences. More text and some more text and so on.</li>
</ul>
    Login or Signup to reply.
  6. 0

    Apart from how you achieve the visual appearance, it also depends on the semantics you want to convey.

    If you see it more as tabular data you would use table.

    th, td {
  vertical-align: top;
}

th::after {
  content: ':'
}
    <table>
<tr>
  <th>2024</th>
  <td>Short announcement</td>
</tr>
<tr>
  <th>2025</th>
  <td>Long announcement that goes to over to the next line, it has <br> and may have multiple sentences. <br> More text and some more text and so on.</td>
</tr>
</table>

    If you think it is a list then you can use dl and set a grid layout:

    dl {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 0.5em;
}

dt, dd {
   display: block;
   margin: 0;
   padding: 0;
}

dt::after {
  content: ':'
}
    <dl>
  <dt>2024</dt>
  <dd>Short announcement</dd>
  <dt>2025</dt>
  <dd>Long announcement that goes to over to the next line, it has <br> and may have multiple sentences. <br> More text and some more text and so on.</dd>
</dl>

    If you want to make it look like a list with the bullet you could add it back with ::before.

    dl {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 0.5em;
}

dt, dd {
   display: block;
   margin: 0;
   padding: 0;
}

dt::after {
  content: ':';
}

dt::before {
  content: '•';
  margin-right: 0.5em;
}
    <dl>
  <dt>2024</dt>
  <dd>Short announcement</dd>
  <dt>2025</dt>
  <dd>Long announcement that goes to over to the next line, it has <br> and may have multiple sentences. <br> More text and some more text and so on.</dd>
</dl>

    Depending on the content of the first column, you might need to prevent line breaks using CSS if that it not desired.

    Login or Signup to reply.
  7. 0

    I would suggest using <dl> tags to separate label and content; and use CSS grid to align items nicely.

    dl {
  display: grid;
  grid-template-columns: min-content auto;
  gap: 1rem;
}

dd {
  /* undo browser defaults */
  margin-left: 0;
}
    <dl>
  <dt>2024</dt>
  <dd>Short announcement</dd>
  <dt>2025</dt>
  <dd>Long announcement that goes to over to the next line, it has<br>
    and may have multiple sentences.<br>
    More text and some more text and so on.</dd>
</dl>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search