我有一个关于检查的 HTML 代码(如下所示),我想在其中左对齐和右对齐 css 中的时间元素内容。
HTML Code (On inspect):
<time datetime="00:15 02-08-2019" style="width:194px;"
data-timezone="et">August 2 00:15</time>
上面的检查是从下面的 php 代码生成的:
Php code:
<time style="width:194px;" datetime="<?php echo esc_attr(date_format($ts, 'H:i d-m-Y'))
?>"data-timezone="<?php echo esc_attr($tz_param) ?>"><?php
echo ucfirst(date_i18n( 'j F &\nb\sp; &\nb\sp; H:i',
$ts->getTimeStamp()-(60*60*4))); ?></time>`
上面inspect html代码属于如下截图:
问题陈述:
我想知道我需要添加什么 CSS 代码,以便我可以左对齐 August 2
(已经存在)和右对齐 00:15
。
最佳答案
新答案
根据您的新更新,并且由于您可以控制 PHP 代码,您可以像下面这样简单地拆分日期:
<time style="width:194px;" datetime="<?php echo esc_attr(date_format($ts, 'H:i d-m-Y'))
?>"data-timezone="<?php echo esc_attr($tz_param) ?>"><?php
echo ucfirst(date_i18n( 'j F',
$ts->getTimeStamp()-(60*60*4))).'<span>'.date_i18n( 'H:i',
$ts->getTimeStamp()-(60*60*4)).'</span>'; ?></time>`
这将产生以下输出:
time {
display:inline-block;
}
time span {
float:right;
}
<time datetime="00:15 02-08-2019" style="width:194px;" data-timezone="et">August 2<span>00:15</span></time>
旧答案
您可以使用 word-spacing
模拟此操作,但您需要在 august
和 2
之间插入一个特殊的空格,称为固定宽度空格不受word-spacing
time {
border:1px solid;
display:block;
width:300px;
word-spacing:190px;
}
<time datetime="00:15 02-08-2019" data-timezone="et">August 2 00:15</time>
<time datetime="00:15 02-08-2019" data-timezone="et">August 2 00:15</time>
Word spacing algorithms are user agent-dependent. Word spacing is also influenced by justification (see the 'text-align' property). Word spacing affects each space (U+0020) and non-breaking space (U+00A0), left in the text after the white space processing rules have been applied. The effect of the property on other word-separator characters is undefined. However general punctuation, characters with zero advance width (such as the zero with space U+200B) and fixed-width spaces (such as U+3000 and U+2000 through U+200A) are not affected. ref
关于php - 左对齐和右对齐CSS中的一个元素内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57329974/