内联水平规则 [重复]

Question

如何使 hr 元素像我在 sn-p 中那样内联，但没有 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>