html - 两个跨度，一个在 div 居中，就好像没有另一个一样，另一个在右侧

Question

我应该实现这样的东西:

<div class="container">
  <span class="title">Header</span>
  <span class="label">today</span>
</div>

标题应位于 div 的中心。标签应该放在紧随其后的位置。所以，我需要这样的东西:

因此，标题应该独立地在标签范围内居中，就好像根本没有标签一样。

是否可以用纯 CSS 来解决这个问题，如果可以，那么如何解决？标记可以更改。

Answer 1

position:absolute 可以做到

.container {
  width: 400px;
  padding: 5px;
  border: 1px solid;
  text-align: center; /* center the text */
  /* to illustrate the center */
  background:linear-gradient(red 0 0) 50%/2px 100% no-repeat;
}
.label {
  position: absolute; /* out of the flow but don't define any position */
}

.title {
 margin-inline: 5px; /* control the gap */
}

<div class="container">
  <span class="title">Header</span>
  <span class="label">today</span>
</div>