即使宽度降低，链接也会覆盖整个屏幕

Question

在h1上有一个链接，无论我提供什么css，它总是跨越整个页面。 我只希望h1可以点击。

DEMO

<section>
  <a href="about.html" target="_blank"><h1>
 About Me
 </h1></a>
</section>

 section a {
      text-decoration: none;
      width: 40vw;
      box-sizing: content-box;
    }

    section a:hover {
      text-decoration: none;
    }

    section h1 {
      width: 40vw;
      box-sizing: content-box;
    }

    section {
      width: 100vw;
      height: 100vh;
      background-color: black;
    }

Answer 1

好吧，如果你把一个放在h1里面，就可以了。

 <h1><a href="about.html" target="_blank">About Me</a></h1> 

希望有所帮助

Answer 2

试试这段代码：

  <style>
        .abcd {
            width: 40vw;
        }
        section a {
            text-decoration: none;
            width: 40vw;
            box-sizing: content-box;
        }

        section a:hover {
            text-decoration: none;
        }

        section h1 {

            box-sizing: content-box;
        }

        section {
            width: 100vw;
            height: 100vh;
            background-color: black;
        }

    </style>
</head>

<body>

    <section class="abcd">
        <h1>
 <a href="about.html" target="_blank">About Me</a></h1>
    </section>

</body>

它正在拾取一些默认部分，所以添加了一个类，只让它占用一定的大小（如果你不喜欢，你可以忽略它），并且还对HTML进行了更改，现在只有关于我可以点击。

Answer 3

代码的这一行意味着您可以使整个相邻的可点击

<a href="about.html" target="_blank"><h1> About Me</h1></a>

因为h1标签是整个相邻的，而这一个

<h1><a href="about.html" target="_blank"> About Me</a></h1>

只关注About Me的文字

使用后者作为解决方案。

如果你想用锚标记a外h1标签，添加此position: absolute; 并调整您的风格宽度。

例如：

  section h1 {
    width: 10vw;
    box-sizing: content-box;
    border: 1px solid white;
    position: absolute;
  }
  section {
    width: 100vw;
    height: 100vh;
    background-color: black;
    position: relative;
  }

你可以将About Me作为唯一可点击的方式