如何将HTML登录框移至屏幕右侧？

核心原因 #

你的登录框默认是块级元素，未设置对齐相关CSS属性，因此会靠左排列。之前修改margin/padding无效，大概率是没有设置正确的属性值。

简便解决方案 #

以下是几种快速实现右侧对齐的方法：

方法1：利用margin自动填充空间（最简单）

给.loginbox添加margin-left: auto，让浏览器自动填充左侧空间，将盒子推至右侧：

.loginbox {
  width: 320px;
  background: #000;
  color: #fff;
  padding: 5px;
  margin-left: auto; /* 新增该行 */
}

方法2：使用Flex布局（适配复杂页面）

若登录框有父容器，给父容器设置Flex布局，通过justify-content控制对齐：

/* 示例：以body作为父容器，也可自定义父容器类名 */
body {
  display: flex;
  justify-content: flex-end; /* 靠右对齐 */
  min-height: 100vh; /* 可选，让容器占满视口高度 */
}

方法3：绝对定位（精确控制位置）

通过绝对定位将登录框固定在右侧：

.loginbox {
  width: 320px;
  background: #000;
  color: #fff;
  padding: 5px;
  position: absolute;
  right: 20px; /* 距离右侧的距离，可按需调整 */
  top: 50%; /* 可选，实现垂直居中 */
  transform: translateY(-50%); /* 配合top完成垂直居中 */
}

额外优化建议 #

• .avatar类设置的宽高仅5px，几乎不可见，建议调整为合适尺寸（如width: 100px; height: 100px;），且top和left属性需配合position: absolute才能生效。
• 提交按钮的action属性应写在<form>标签上，而非<input>标签内，修改后代码如下：

<form action="RoyalReaderHomePageL.php">
  <!-- 表单内容 -->
  <input type="submit" name="login_button" value="Login">
</form>

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