html - 如何使用 HTML 和 CSS 创建营业时间列表？

Question

我无法弄清楚如何使用基本的 html 和 css 正确地创建一个操作数小时的列表。

我试图制作 2 列。左栏是星期几 (text-align:right;)，右栏是小时 (text-align:left;)，这样一天的右边缘和小时的左边缘在中心对齐。

有没有办法做到这一点并使 2 个列表项与中心对齐？

这可以用 <dl> 来完成吗？或 2 <ul> ？

这是一个可视化 Example

右:

   Sunday: Closed
   Monday: 9am - 5pm
  Tuesday: 9am - 5pm
Wednesday: 9am - 5pm
 Thursday: 9am - 5pm

错误:

Sunday: Closed
Monday: 9am - 5pm
Tuesday: 9am - 5pm
Wednesday: 9am - 5pm
Thursday: 9am - 5pm

Answer 1

您可以使用正常的 <table>为此元素。由于您的数据实际上是一个表，因此在这里使用它并不丢脸。或者一个 dl也可能有效。

th {
  text-align: right; 
}

<table>
<tr><th>Sunday</th><td>Closed</td></tr>
<tr><th>Monday</th><td>9am - 5pm</td></tr>
<tr><th>Tuesday</th><td>9am - 5pm</td></tr>
<tr><th>Wednesday</th><td>9am - 5pm</td></tr>
<tr><th>Thursday</th><td>9am - 5pm</td></tr>
</table>