添加垂直样式线条后导航失效，页面头部异常问题求助

问题根源 #

1. HTML结构违规：你把.title和导航<ul>放在了<head>标签里，这完全不符合HTML规范——<head>只能放页面元数据（比如字符编码、样式链接、标题），所有可见的页面内容必须放在<body>内。浏览器会自动修正这个错误，但会导致布局混乱，导航元素的点击区域偏移或失效。
2. 定位方式不合理：你用position: relative加负偏移值调整元素位置，这种写法极易导致元素重叠、点击区域被遮挡，加上垂直线.v1的负top值，进一步干扰了导航的可点击区域。

修复步骤 #

1. 修正HTML结构 #

把<head>里的.title和导航<ul>全部移到<body>中，确保页面结构符合规范：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Space Mono"
      rel="stylesheet"
    />
    <title>xero.wtf</title>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div class="header-container">
      <div class="title">
        <h1>xero.<span>wtf</span></h1>
      </div>
      <ul class="nav-list">
        <li><a href="index.html">Home</a></li>
        <li><a href="skills.html">Skills</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>
    <div class="v1"></div>
  </body>
</html>

2. 重构CSS布局（去掉不稳定的负偏移） #

用Flexbox实现头部导航的布局，代替原来的相对定位负偏移，同时调整垂直线的位置，避免遮挡内容：

/* 全局样式重置，消除默认边距干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #101010;
  padding: 20px;
}

/* 头部容器用Flex实现左右布局 */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.title {
  color: rgb(198, 59, 172);
  font-family: "montserrat";
  font-size: 30px;
  margin-left: 60px;
}

span {
  color: rgb(255, 255, 255);
}

.nav-list {
  display: flex;
  gap: 40px;
  margin-right: 60px;
}

.nav-list li {
  font-family: "montserrat";
  list-style-type: none;
  font-size: 30px;
  font-weight: 900;
}

a {
  text-decoration: none;
  color: rgb(198, 59, 172);
}

/* 垂直线调整位置，避免遮挡导航 */
.v1 {
  border-left: 3px solid white;
  height: 600px;
  margin-left: 30px;
}

/* 保留你原来的其他内容样式 */
.greeting {
  font-family: "Space Mono";
  margin-left: 80px;
  color: rgb(198, 59, 172);
  font-size: 30px;
}

.welcome {
  font-family: "Space Mono";
  margin-left: 80px;
  color: rgb(255, 255, 255);
  font-size: 30px;
}

.welcome span {
  font-family: "Space Mono";
  margin-left: -10px;
  color: rgb(198, 59, 172);
  font-size: 60px;
}

修复逻辑说明 #

• 符合HTML规范的结构能让浏览器正确渲染元素，从根源避免布局混乱导致的点击失效。
• Flexbox布局比相对定位负偏移更稳定，能轻松实现左右对齐的导航栏，不会出现元素重叠或点击区域偏移的问题。
• 去掉了容易引发问题的负top值，垂直线的位置更合理，不会遮挡导航元素。

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