如何在H1标题同一行后方添加分隔线 现有实现错位问题求助

问题原因 #

• 原生<h1>属于块级元素，默认宽度占满父容器，会强制后续元素换行，所以无法和分隔线同行展示
• 原有代码中border-top-width: 3 px 数值与单位之间存在多余空格，导致边框样式不生效
• 行内块元素未设置垂直对齐规则，添加文本后会因基线对齐规则出现位置偏移

可行实现方案 #

推荐使用Flex布局实现，适配有无分隔线文本的两种场景，代码如下：

<style>
/* 标题容器统一控制对齐 */
.title-container {
    display: flex;
    align-items: center;
    gap: 16px; /* 控制标题与分隔线的间距 */
}
.title-container h1 {
    margin: 0; /* 清除h1默认外边距，避免布局错位 */
}
/* 无文本的分隔线样式 */
.sepr-line {
    flex: 0 1 18%; /* 对应你需要的最大18%宽度，也可写flex:1占满剩余空间 */
    border-top: 3px solid #FF563A;
}
/* 带文本的分隔线样式 */
.sepr-line.has-text {
    display: flex;
    align-items: center;
    gap: 12px;
    border: none;
    color: #666;
}
.sepr-line.has-text::before {
    content: "";
    flex: 1;
    border-top: 3px solid #FF563A;
}
</style>

<!-- 无文本分隔线用法 -->
<div class="title-container">
    <h1>Test</h1>
    <div class="sepr-line"></div>
</div>

<!-- 带文本分隔线用法 -->
<div class="title-container">
    <h1>Test</h1>
    <div class="sepr-line has-text">Test title</div>
</div>

该方案自动实现垂直居中对齐，不需要手动调整行高，分隔线宽度可根据需求灵活修改，添加文本后不会出现位置偏移问题。

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