HTML如何实现固定按钮位于右上角且不影响标题正常对齐

问题原因 #

• 可见内容放置位置错误：<a>按钮、<h1>标题都属于页面可见内容，不能放在<head>标签中，必须放在<body>标签内，<head>仅用于存放样式、元数据等非可见配置，这是引发布局异常的核心原因之一。
• 浮动元素未做适配：float: right会让元素脱离正常文档流，后续的<h1>元素会受浮动元素挤压，直接导致对齐错乱。

解决方案（推荐flex布局，可控性更高） #

用头部容器包裹标题和按钮，通过flex布局实现对齐，完全不会打乱标题排版：

<!DOCTYPE html>
<html>
<head>      
  <style>
    /* 头部容器 */
    .header-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      /* 可按需调整padding控制元素和页面边缘的距离，设为0则完全贴边 */
      padding: 0 10px;
    }
    .myButton {
      padding: 8px 12px; /* 原padding为0按钮太窄，可按需调整 */
      background-color: green;
      color: white;
      text-align: center;
      text-decoration: none; /* 去掉a标签默认下划线 */
    }
    h1 {
      font-size: 50px;
      margin: 0; /* 清除h1默认外边距避免错位 */
    }
  </style>
</head>
<body>
  <div class="header-wrap">
    <h1>Leaderboard</h1>
    <a href="Login Page.html" class="myButton">Username</a>
  </div>
</body>
</html>

如果一定要用浮动实现，可参考修改后的代码：

<!DOCTYPE html>
<html>
<head>      
  <style>
    .myButton {
      padding: 8px 12px;
      float: right;
      background-color: green;
      color: white;
      text-align: center;
      text-decoration: none;
    }
    h1 {
      font-size: 50px;
      margin: 0;
      display: inline-block;
    }
    /* 头部容器清除浮动，避免影响后续页面内容排版 */
    .header-wrap::after {
      content: "";
      display: table;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="header-wrap">
    <a href="Login Page.html" class="myButton">Username</a>
    <h1>Leaderboard</h1>
  </div>
</body>
</html>

两种方案都可以实现按钮固定在页面最右上角，同时不会打乱标题的对齐效果。

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