在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>

上述检查是由以下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>`

以上的HTML代码属于以下截图：

问题陈述：

我想知道需要添加什么CSS代码才能将August 2（已存在）左对齐，将00:15右对齐。

- flash

---

HTML长什么样子？如果它被包裹在一个div中，且两者都是spans，那么你可以使用float: left，float: right。 - Keith

在单个元素中，你无法这样做。它被视为一个单独的文本行。 - Paulie_D

这是检查元素时的HTML代码：<time datetime="00:15 02-08-2019" style="width:194px;" data-timezone="et">August 2 &nbsp; &nbsp; 00:15</time>。 - flash

没有将它们放在不同的容器中，你就无法做到这一点。 - Keith

ucfirst(date_i18n('j F &\nb\sp; &\nb\sp; H:i', $ts->getTimeStamp()-(14400))); 中的 @flash 'j F &\nb\sp; &\nb\sp; H:i' 是您的格式字符串。它本质上是一个模板。 <span>j F</span><span>H:i</span>'，但您可能需要转义 <span></span> 部分。我不太了解 PHP，无法告诉您如何处理这个问题。 - Brett Caswell

如果您能将日期和小时分别放在两个<span>中，那么您可以在它们的父元素上使用：display: flex; justify-content: space-between;。 - f-spin

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>

单词间距算法因用户代理而异。单词间距也受调整方式的影响（请参阅'text-align'属性）。在应用了空格处理规则后，单词间距会影响每个空格（U+0020）和非断行空格（U+00A0）留在文本中的空格。该属性对其他单词分隔符字符的影响是未定义的。但是，一般标点符号、零宽度字符（如带空格的零U+200B）和定宽空格（如U+3000和U+2000到U+200A）不受影响。参见ref

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

- Temani Afif

---

谢谢这个。看起来很棒。我想知道如何在“august”和“2”之间添加一个称为固定宽度空格的特殊空格。 - flash

@flash 尝试在 j 和 F 之间插入空格来替换你原本的普通空格，这样可以正常工作。 - Temani Afif

嘿，朋友，你有关于这个问题的任何想法吗？ - oldboy

@BugWhisperer 抱歉，如果它不涉及 CSS，我就无法提供帮助了。 - Temani Afif

@TemaniAfif 我原本想用这个建议修改您的原始答案，但似乎您已经更新了。我建议您使用十六进制码（如 ）而不是编码字符，以示例说明。 - Brett Caswell

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>

- DCR

---

这个HTML代码是在检查元素中的，我无法更改它。这里是生成我的问题中HTML代码的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> - flash

是的，我可以。我需要做哪些更改？ - flash

将您的日期拆分并添加 span 标签。调整 CSS。 - DCR

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;
}

如果你想要代码更加清晰，那么你应该在浮动后清除它。

你也可以使用两个元素，一个用于日期，一个用于时间，然后像这样使用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;

- wawa