在Firefox中的检查器中查看时，HTML div元素覆盖整个表单

Question

我是CSS新手。 创建一个带有4个输入文本框的表单。 这是代码：

 body { background: #484848; color: white; margin:0px; } .pagetop{ width:1280px } header{ background: #D9853B; padding:15px 40px; margin:20px; } a{ color:white; } div{ padding:2px; } .pagetop nav h1,ul,li{ display:inline; } nav ul,li{ padding: 20px; } .signinform{ margin:0 auto; margin-top:20px; max-width: 600px; } .inputleft{ width: 30%; float: left; text-align: right; } .inputright{ width: 65%; margin-left: 10px; float:left; } .submitbutton{ width: 60%; align-self: center; }

 <html> <head> <link rel="stylesheet" href="src/static/base.css"> </head> <form method="post" class="signinform"> <div class="inputleft"> UserName: </div> <div class="inputright"> <input type="text" name="username" value={{username}}> </div> <div class="inputleft"> Password: </div> <div class="inputright"> <input type="password" name="pwd"> </div> <div class="inputleft"> Verify Password: </div> <div class="inputright"> <input type="password" name="pwdverify"> </div> <div class="inputleft"> Email(Optional): </div> <div class="inputright"> <input type="text" name="email" value={{email}}> </div> <div> <input type="submit"> </div> </form> </html>

在Firefox浏览器中的检查器中查看时，表单中的最后一个div元素涵盖了所有表单，我的理解是，当我将鼠标悬停在div元素上时，仅应突出显示div元素，而不能突出显示form元素的其他元素。

当我应用inputright样式时，会发生此问题。 请解释这里发生了什么。

Answer 1

首先，您必须关闭<form>标记，要记住的主要事情是使用clear:both; 在每个使用float css的div之后。

在使用float时这是必须的，因为通过float我们破坏了流程并推动元素内联，因此当元素不适合空间时它们会对齐。 您尚未遇到该问题，但是要通过该问题来挽救自己，最好在每个浮动div之后使用clear：both，这样可以清除空白并从该问题中进行保存。

另外，如果您不清除，则它也不会出现在检查中。 参见我的示例，我在所有浮动行之后都使用了clear：Both，所以不会像您所面对的那样有任何空白或检查元素的问题。

在Firefox中的检查器中查看时，HTML div元素覆盖整个表单

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-09-09 11:21:28

在Firefox中的检查器中查看时，HTML div元素覆盖整个表单

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-09-09 11:21:28

解决方案1
2 已采纳 2016-09-09 11:21:28