<time> 在 HTML 中右对齐

Question

我试图用CSS右对齐日期(HTML<time>标签)。但这行不通。为什么?我可以把<time>放在<div>中，然后把CSS应用到<div>中，但是如何在没有额外工作的情况下做到这一点?

my code on glitch

<h1 style="text-align: right;">i'm right-aligned</h1>
<time style="text-align: right;" datetime="2021-01-17">January 17<sup>th</sup> 2021(why not right-aligned?)</time>

Answer 1

和span、strong、input等一样，time标签也不是块级元素．
总之，time是一个内联元素.
块级元素是那些占据其父元素整个宽度的元素，例如hr,div, p。
内联元素只占用其内容的宽度，所以如果没有块级包装器，它们就不能向右对齐。

然而，你总是可以使用float来处理它们。

<time style="float: right;" datetime="2021-01-17">January 17<sup>th</sup> 2021</time>

Answer 2

<time>标签在2011年被<data>标签所取代。它应该在文本行中使用。事实上，随着<date>的开发，它应该根本不被使用。

标签只是为了便于阅读，尤其是考虑到屏幕阅读器。因此，它应该放在一个文本元素中。只要把它包装在像段落<p>这样的etext元素中，你就可以对齐段落了。

或者，您需要将<time>标记更改为块级元素，然后可以对齐它们。

p.time {
text-align: right;
}
h1 {
text-align: center;
}
time.time {
display: block;
text-align: right;
}

<h1>Using Inline-Style:</h1>
<p style="text-align: right;"><time datetime="2021-01-17">January 17<sup>th</sup> 2021(why not right-aligned?)</time></p>
<br>
<h1>Using CSS:</h1>
<p class="time"><time datetime="2021-01-17">January 17<sup>th</sup> 2021(why not right-aligned?)</time></p>
<h1>Without wrapper:</h1>
<time class="time" datetime="2021-01-17">January 17<sup>th</sup> 2021(why not right-aligned?)</time>