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;

带有分组标题的标题列表

1 个答案: