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

Question

我在弄清楚如何使用基本的 html 和 css 正确创建操作小时数的列表时遇到了麻烦。

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

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

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

这是一个视觉示例

对：

   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>为此使用普通元素。由于您的数据实际上是一个表，在这里使用它并不可耻。或者 adl也可能有效。

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>