php - 左对齐和右对齐CSS中的一个元素内容

Question

我有一个关于检查的 HTML 代码(如下所示)，我想在其中左对齐和右对齐 css 中的时间元素内容。

HTML Code (On inspect):

<time datetime="00:15 02-08-2019" style="width:194px;" 
data-timezone="et">August 2 &nbsp;  &nbsp; 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。

Answer 1

新答案

根据您的新更新，并且由于您可以控制 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&#x2002;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

空间列表:http://jkorpela.fi/chars/spaces.html