html - 如何使列表的各个部分级别

Question

有那么几天，我想不出在 Google 上搜索的正确措辞，我尝试了很多方法。当我找到答案时，我要打自己了......

当您运行下面的代码时，您会发现每行最后的“pm”不是水平的。如何使每个开始/结束时间保持一致？

<ul style="list-style-type: none;">
  <li>Mon 7am - 7pm</li>
  <li>Tue 7am - 7pm</li>
  <li>Wed 7am - 7pm</li>
  <li>Thu 7am - 7pm</li>
  <li>Fri 7am - 7pm</li>
  <li>Sat 7am - 7pm</li>
  <li>Sun - Closed</li>
</ul>

对于新手问题，我深表歉意。

Answer 1

好吧，为了好玩，另一种方法是 attr() 黑魔法。您可以使用 span 或任何结果相同的内容。您只需要一个固定宽度的 inline-block 元素。

浏览器支持 from IE8 ，因此即使在 Windows XP SP1 中，您的工作时间也会保持一致。

li::before{
  content: attr(data-day);
  display: inline-block;
  width: 40px;
  color: #888;
}

[data-day=Sun]{
  color: red;
}

<ul style="list-style-type: none;">
  <li data-day="Mon">7am - 7pm</li>
  <li data-day="Tue">7am - 7pm</li>
  <li data-day="Wed">7am - 7pm</li>
  <li data-day="Thu">7am - 7pm</li>
  <li data-day="Fri">7am - 7pm</li>
  <li data-day="Sat">7am - 7pm</li>
  <li data-day="Sun">Closed</li>
</ul>