带有分组标题的标题列表

Question

我正在尝试显示按日期分组的事件列表：

May 1
    Event 1
    Event 2
May 2
    Event 1
    Event 2

我仍然希望能够使用CSS选择器来定位事件组。例如：

May 1
    |=======|
    |Event 1|
    |Event 2|
    |=======|
May 2
    |=======|
    |Event 1|
    |Event 2|
    |=======|

什么HTML标签是构建它的正确方法？

我虽然使用了描述列表，但似乎很难用CSS选择器来定位事件组。我看不到绘制包含5月1日事件的方框的好方法：

<dl>
    <dt>May 1</dt>
    <dd>Event 1</dd>
    <dd>Event 2</dd>
    <dt>May 2</dt>
    <dd>Event 1</dd>
    <dd>Event 2</dd>
</dl>

使用div似乎是一个很好的替代品，但感觉我正在失去一些结构：

<div>
    <div>May 1</div>
    <div>
        <div>Event 1</div>
        <div>Event 2</div>
    </div>
    <div>May 2</div>
    <div>
        <div>Event 1</div>
        <div>Event 2</div>
    </div>
</div>

Answer 1

理想时间是否使用* { margin: 0; padding: 0; box-sizing: border-box; } ::before, ::after { box-sizing: inherit; } ul { list-style: none; } .dates { display: inline-block; } .date ul { border: 1px solid red; margin-left: 1em; }结构？

＆＃13;

＆＃13;

<ul class="dates">
  <li class="date">Date 1
    <ul>
      <li>Event</li>
      <li>Event</li>
      <li>Event</li>
    </ul>
  </li>
  <li class="date">Date 2
    <ul>
      <li>Event</li>
      <li>Event</li>
      <li>Event</li>
    </ul>
  </li>
</ul>

＆＃13;

id  colA colB(Chained)
1   11   17
2   22   41
3   44   42
4   82   43
5   17   13
6   20   85
7   26   90
8   13   19
9   19   82

＆＃13;

＆＃13;

＆＃13;