如何实现HTML中<hr>元素与文本内容同一行内联显示

<hr> 默认是块级元素，会独占一行，要实现和左右文本同行、分隔线填充中间区域的效果，直接用Flex布局实现即可，代码简洁兼容性好：

<div style="display: flex; align-items: center; gap: 1rem; width: 100%;">
  <span>TEST</span>
  <hr style="flex-grow: 1; margin: 0; border: none; border-top: 1px solid #999;">
  <span>A 200T</span>
</div>

• 外层容器设置display: flex后，所有子元素会默认横向排列在同一行
• align-items: center 保证文本和分隔线垂直居中对齐
• 给<hr>设置flex-grow: 1后，它会自动占满左右文本之外的所有剩余宽度，正好处于两个文本的中间位置
• 重置<hr>默认的外边距和边框样式，避免浏览器默认样式导致的错位、高度异常问题

这个方案不需要手动设置分隔线宽度，会自动适配父容器的尺寸变化，渲染效果和预期一致。

内容的提问来源于stack exchange，提问作者LoCaL