如何使用HTML和CSS实现文本右侧水平分隔线并适配响应式屏幕

这类缩屏后水平线消失、对齐偏移的场景，本质是两处样式没处理到位：

• <hr>是块级元素，浏览器默认会给它设置占满父容器100%的初始宽度，放进flex布局后，它会带着这个满宽的初始值参与空间分配。前面<h2>的内容占走一部分宽度后，整体内容宽度超出flex容器，flex默认的等比收缩规则会把<hr>压缩到几乎0宽度，屏幕缩窄到一定程度线就直接看不见了
• 现有代码靠margin-top: 30px硬凑水平线和标题的垂直对齐，只要稍微改下字号、换个字体就会错位；同时没清除<hr>、<h2>的浏览器默认边距，很容易出现布局偏移
• 额外提醒：现有代码里4个没有内容的等宽栅格列完全是冗余的，不需要用空列占位

<div>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div style="display: flex; align-items: center; gap: 10px;">
          <h2 style="font-weight: bold; margin: 0;">
            Services
          </h2>
          <hr style="flex: 1 0 0; height: 1px; border: none; background: #d1d5db; margin: 0;">
        </div>
      </div>
    </div>
  </div>
</div>

• 给flex容器加align-items: center，让标题和水平线天然保持垂直居中，不用手动计算margin凑对齐位置
• 用gap: 10px设置标题和分割线的间距，比硬给线加左外边距的方式布局更稳定
• 给<hr>设置flex: 1 0 0，把它的初始基础宽度设为0，完全通过flex空间分配来占据剩余横向宽度，不管屏幕缩到多窄，只要有剩余空间线就会一直撑满，不会被压缩消失
• 清除了标题和分割线的默认边距，用1px高度的背景块代替hr默认的边框样式做分割线，显示效果更可控

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