左对齐和右对齐css中的一个元素内容

Question

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

HTML 代码（审查中）：

<time datetime="00:15 02-08-2019" style="width:194px;" 
data-timezone="et">August 2 &nbsp;  &nbsp; 00:15</time>

上面的inspect是从下面的php代码生成的：

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 &\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>

字间距算法依赖于用户代理。字间距也受对齐的影响（请参阅“文本对齐”属性）。字间距影响每个空格 (U+0020) 和不间断空格 (U+00A0)，在应用空格处理规则后留在文本中。该属性对其他单词分隔符的影响是未定义的。但是一般的标点，前移宽度为零的字符（例如带有空格 U+200B 的零）和固定宽度的空格（例如 U+3000 和 U+2000 到 U+200A）不受影响。 ^ref

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

Answer 2

span{
  float:right;
  }
  
 div{

 }

<div>
   <time datetime="00:15 02-08-2019"  data-timezone="et">
      August 2 
      <span> 00:15 </span>
   </time>
</div>

Answer 3

有多种方法可以使用 CSS 实现您想要的，但是所有这些方法都要求您至少将“左”或“右”部分包装在它自己的容器中。

一个选项（如其他人所建议的）是这样使用浮点数：

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><?php echo date_i18n('H:i', $ts->getTimeStamp()-(60*60*4))); ?></span>
</time>

CSS：

time > span {
    float: right;
}

如果你想要干净，你应该在之后清除浮动。

您还可以使用两个<span> 元素，一个用于日期，一个用于时间，然后使用display: flex;（要了解Flexbox，我建议阅读这篇文章：https://css-tricks.com/snippets/css/a-guide-to-flexbox/），如下所示：

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) ?>">
    <span><?php echo ucfirst(date_i18n('j F', $ts->getTimeStamp()-(60*60*4))); ?></span>
    <span class="time-right"><?php echo date_i18n('H:i', $ts->getTimeStamp()-(60*60*4))); ?></span>
</time>

CSS：（使用选项 1 或选项 2，不能同时使用）

/* OPTION 1 */
time {
    display: flex;
}

time > span {
    flex-grow: 1;
}

time > span.time-right {
    text-align: right;
}

/* OPTION 2 */
time {
    display: flex;
    justify-content: space-between;
}

/* Note: There are many more options achieving this using flex */

您也可以为此使用相对定位和绝对定位，方法是给 <time> 元素一个 position: relative 和 <span> 一个 position: absolute; right: 0;