如何使<span>元素与相邻元素对齐？登录表单CSS布局问题求助

嘿，刚看了你的问题和代码，这个对齐错位的问题其实挺常见的，我来给你几个简单的修复方案！

问题原因 #

你给两个<span>分别加了float: left和float: right，但<span>本身是行内元素，浮动后它们的垂直对齐默认是基线对齐，而左边的Remember Me还带着一个复选框，复选框的基线和纯文本的基线位置有差异，就导致视觉上右边的"Forgot Password"看起来偏高了。

修复方案（推荐用Flex布局，简单高效） #

Flex布局是现在处理对齐问题最省心的方式，直接给包含两个span的父容器设置flex属性，去掉浮动：

修改你的CSS代码，替换原来的#loginCheck和#forgotPass的样式：

/* 找到包含两个span的那个div，设置flex布局 */
#loginForm form div:nth-of-type(2) {
  display: flex;
  justify-content: space-between; /* 让两个元素分别靠左右 */
  align-items: center; /* 垂直居中对齐 */
  margin: 10px 0; /* 可选：加个上下间距，排版更舒服 */
}

/* 取消两个span的浮动 */
#loginCheck {
  float: none;
}

#forgotPass {
  float: none;
}

另一种方案（保留浮动的传统写法） #

如果你不想用Flex，也可以通过统一垂直对齐和清除浮动来修复：

/* 给两个span设置垂直居中对齐 */
#loginCheck, #forgotPass {
  vertical-align: middle;
  line-height: 1.6; /* 调整行高，和复选框的高度匹配 */
}

/* 给父容器清除浮动，避免高度塌陷 */
#loginForm form div:nth-of-type(2) {
  overflow: hidden;
}

效果验证 #

修改后，"Forgot Password"就会和"Remember Me"（包括复选框）在垂直方向上居中对齐了，视觉上就不会一高一低啦！

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