内联水平尺

Question

如何像在片段中一样使<hr>内联，但是没有absolute定位并且没有<hr>交叉文本？

div { position: relative; }

hr {
  position: absolute;
  top: 0.125rem;
  left: 0;
  right: 0;
}

<div>
  Hello, World? <hr>
</div>

Answer 1

您可以在父级上使用display flex，然后使hr flex增大以使其填充行的其余部分：

div { display:flex; }

hr {
  flex-grow:1;
  margin-left:10px; /* gap on left */
}

<div>
  <span>Hello, World?</span> <hr>
</div>