HTML表单边框溢出外层Div问题及提交按钮Hover效果失效解决方案咨询

我来帮你搞定这两个问题，咱们一个个拆解：

问题1：Form边框超出

容器范围 #

原因分析 #

你给<form>设置了width: 100%和10px solid indianred的边框，但**默认盒模型（content-box）**会把边框宽度算在元素宽度之外，导致form的总宽度变成100% + 20px（左右各10px边框），自然就超出了父容器.main-container的范围。另外你CSS里的marker: 0%;是笔误，应该是margin: 0;。

解决方案 #

给<form>添加box-sizing: border-box;，让边框和内边距都包含在设置的宽度内，同时修正笔误并适当调整内边距让内容不贴边框：

form { 
  display: flex; 
  flex-wrap: wrap; 
  flex-direction: column; 
  border: 10px solid indianred; 
  padding: 1rem; /* 增加内边距，让内容不贴边框 */
  margin: 0; /* 修正笔误：marker → margin */
  width: 100%; 
  box-sizing: border-box; /* 关键：边框包含在宽度内 */
} 

问题2：Submit按钮的Hover效果未生效 #

原因分析 #

你的CSS选择器form>div>button[type=submit]:hover用了直接子元素选择器>，但HTML里的提交按钮并不是<form>直接子div的直接子元素——按钮嵌套在new-expense__controls下面的第三层div里，所以这个选择器匹配不到目标按钮。另外如果是普通HTML页面，你HTML里写的className是React语法，要改成class（如果是React项目则不用改，但CSS选择器要对应正确）。

解决方案 #

把选择器里的直接子元素符号>去掉，改成通用的后代选择器，或者更精准的层级选择：

/* 修正后的hover选择器：匹配form下所有后代的submit按钮 */
form div button[type=submit]:hover { 
  color: rgba(255, 142, 120); 
  background-color: rgba(255, 0, 0); 
}

如果是普通HTML页面，记得把HTML里的className改成class：

<div class='main-container'> 
  <form> 
    <div class="new-expense__controls"> <!-- className → class -->
      <div class="new-expense__control"> <!-- className → class -->
        <label> E-mail </label> 
        <input type="text" placeholder="E-mail" /> 
      </div> 
      <div class="pass__control"> <!-- className → class -->
        <label> Password </label> 
        <input type="password" placeholder="Password" /> 
      </div> 
      <div> 
        <button type="submit"> Login </button> 
      </div> 
    </div> 
  </form> 
</div>

完整修正后的代码 #

修正后的CSS #

body>.main-container { 
  position: absolute; 
  border: 2px solid red; 
  background-color: black; 
  border: 1px solid rgba(8, 5, 5, .5); 
  -webkit-background-clip: padding-box; /* for Safari */ 
  background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ 
  border-radius: 30px; 
  width: 80%; 
  height: 25%; 
  left: 10%; 
  top: 30%; 
  box-sizing: border-box; /* 父容器也建议加上，避免后续样式问题 */
} 
form { 
  display: flex; 
  flex-wrap: wrap; 
  flex-direction: column; 
  border: 10px solid indianred; 
  padding: 1rem; 
  margin: 0; 
  width: 100%; 
  box-sizing: border-box; 
  height: 100%; /* 让form填满父容器高度 */
} 
form div button { 
  width: 250px; 
  height: 50px; 
  border-radius: 20px; 
  margin-top: 15%; 
  margin-left: 20%; 
  font-size: 30px; 
  color: rgba(255, 238, 237); 
  background-color: rgb(255, 106, 69); 
  cursor: pointer; /* 加上鼠标指针效果，提升交互体验 */
} 
form div button[type=submit]:hover { 
  color: rgba(255, 142, 120); 
  background-color: rgba(255, 0, 0); 
}

修正后的HTML（普通HTML版本） #

<div class='main-container'> 
  <form> 
    <div class="new-expense__controls"> 
      <div class="new-expense__control"> 
        <label> E-mail </label> 
        <input type="text" placeholder="E-mail" /> 
      </div> 
      <div class="pass__control"> 
        <label> Password </label> 
        <input type="password" placeholder="Password" /> 
      </div> 
      <div> 
        <button type="submit"> Login </button> 
      </div> 
    </div> 
  </form> 
</div>

内容的提问来源于stack exchange，提问作者Nice-Willow