HTML <hr>标签定位异常 未按预期排布在对应<p>标签后方

<hr>定位错位的核心原因是导航布局写法错误：

• 你给四个水平导航的<p>标签设置了position: relative+bottom:75px/left:715px的硬偏移，这种偏移只会移动元素的视觉显示位置，不会改变元素在正常文档流里的原始占位，后续的<hr>作为正常流块级元素，排布参考的是<p>没偏移之前的原始位置，不是你看到的视觉位置。
• 四个<p>设为inline-block后，加上715px的左偏移，总宽度超出容器范围时会自动换行，前两个<p>的原始占位和后两个<p>的原始占位本身就不在同一行，对应跟着的<hr>自然会按原始流位置排布，才会出现前两个<p>后的<hr>掉到下方的异常。
• 靠手动算px偏移凑布局的方式本身可维护性极差，换个屏幕尺寸布局直接就会错乱。

放弃手动relative偏移的写法，用flex布局实现导航，从根源上避免文档流错位问题，响应式适配也更简单。

修复后完整CSS #

/* 全局重置，避免浏览器默认边距干扰布局 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#text {
  color: rgb(134, 47, 215);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
/* 导航栏容器用flex实现logo和菜单的两端对齐 */
.nav-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}
/* 水平菜单容器flex横向排列 */
.horizontal-menu {
  display: flex;
  gap: 4px;
  align-items: center;
}
.align-horizontal-a,
.align-horizontal-b,
.align-horizontal-c,
.align-horizontal-d {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  padding: 10px;
}
.align-horizontal-a:hover,
.align-horizontal-b:hover,
.align-horizontal-c:hover,
.align-horizontal-d:hover {
  text-decoration: underline;
  cursor: pointer;
}
.vertical-aligned-item-a,
.vertical-aligned-item-b,
.vertical-aligned-item-c,
.vertical-aligned-item-d {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  display: none;
  text-align: center;
  padding: 10px 0;
}
.image-x-sign {
  width: 30px;
  display: none;
  margin: 1rem auto;
}
.none-display {
  display: none;
}
@media only screen and (max-width:500px) {
  /* 小屏隐藏水平菜单，显示垂直菜单 */
  .horizontal-menu {
    display: none;
  }
  .vertical-aligned-item-a,
  .vertical-aligned-item-b,
  .vertical-aligned-item-c,
  .vertical-aligned-item-d,
  .image-x-sign {
    display: block;
  }
}

修复后完整HTML #

<nav>
  <div class="nav-bar">
    <h3 id="text">WebDev.</h3>
    <div class="horizontal-menu">
      <p class="align-horizontal-a">Services</p>
      <hr>
      <p class="align-horizontal-b">Blog</p>
      <hr>
      <p class="align-horizontal-c">About</p>
      <hr>
      <p class="align-horizontal-d">Contact</p>
    </div>
  </div>
  <hr>
  <div>
    <img src="x-sign.png" alt="x-sign" class="image-x-sign">
    <p class="vertical-aligned-item-a">Services</p>
    <hr class="none-display">
    <p class="vertical-aligned-item-b">Blog</p>
    <hr class="none-display">
    <p class="vertical-aligned-item-c">About</p>
    <hr class="none-display">
    <p class="vertical-aligned-item-d">Contact</p>
    <hr class="none-display">
  </div>
</nav>

• 所有横向排列的UI组件（导航、按钮组、标签组等）优先用flex/grid实现，不要靠relative硬偏移凑位置，后者完全无法适配不同分辨率，还会频繁出现文档流错位问题。
• position: relative的偏移属于视觉层调整，不会改变元素在正常文档流的占位，除非是做小幅度的视觉位置微调，否则不要用它做整体布局。

内容的提问来源于stack exchange，提问作者a random noob