表单按钮位置调整与div hover显示问题求助

一、Login按钮向右偏移32%并文字居中 #

假设你的HTML结构如下（适配常见表单布局）：

<div class="top-left-wrapper">
  <form>
    <!-- 其他表单元素 -->
    <button type="submit" class="login-btn">Login</button>
  </form>
</div>

可以通过两种方式实现需求：

方式1：绝对定位（精准基于父容器偏移） #

/* 给表单设置相对定位，作为按钮绝对定位的参照容器 */
.top-left-wrapper form {
  position: relative;
}

.login-btn {
  position: absolute;
  left: 32%; /* 向右偏移父容器宽度的32% */
  text-align: center; /* 文字居中 */
  width: auto; /* 自适应文字宽度，也可设固定值如100px */
}

方式2：外边距偏移（更适合流式布局） #

.login-btn {
  margin-left: 32%; /* 向右偏移自身所在流的32%宽度 */
  text-align: center;
  display: inline-block; /* 确保text-align生效，避免按钮占满整行 */
  width: auto;
}

二、鼠标悬停cell18时显示cell21 #

核心是利用CSS兄弟选择器或后代选择器，结合:hover伪类控制元素显示隐藏。需根据你的DOM结构选择对应写法：

情况1：cell21是cell18的相邻兄弟元素 #

<div id="cell18">悬停此处显示内容</div>
<div id="cell21">需要显示的内容</div>

/* 初始隐藏cell21 */
#cell21 {
  display: none;
}

/* 悬停cell18时，显示相邻的cell21 */
#cell18:hover + #cell21 {
  display: block;
}

情况2：cell21与cell18同属一个父容器（非相邻） #

<div class="parent-box">
  <div id="cell18">悬停此处显示内容</div>
  <!-- 中间其他元素 -->
  <div id="cell21">需要显示的内容</div>
</div>

#cell21 {
  display: none;
}

/* 悬停cell18时，显示父容器内所有后续的cell21 */
#cell18:hover ~ #cell21 {
  display: block;
}

情况3：cell21是cell18的子元素 #

<div id="cell18">
  悬停此处显示内容
  <div id="cell21">需要显示的内容</div>
</div>

#cell21 {
  display: none;
}

#cell18:hover #cell21 {
  display: block;
}

如果之前尝试的opacity无效，是因为opacity仅控制透明度，元素仍占据页面空间；而display: none会完全移除元素的布局占位，更符合需求。若样式不生效，检查是否存在更高优先级的CSS规则覆盖，可临时用!important测试（不推荐长期使用，建议调整选择器权重）。

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