在Firefox中的检查器中查看时，HTML div元素覆盖整个表单
[英]HTML div element covering whole form when viewed in inspector in firefox
问题描述
I am new to CSS. 
我是CSS新手。 Created a form with 4 input text boxes. 创建一个带有4个输入文本框的表单。 Here is the code: 这是代码：
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>
The last div element in the form covers all of the form when viewed in inspector in Firefox browser, my understanding says when I hover over div element then only div element should be highlighted not the other elements of form element. 在Firefox浏览器中的检查器中查看时，表单中的最后一个div元素涵盖了所有表单，我的理解是，当我将鼠标悬停在div元素上时，仅应突出显示div元素，而不能突出显示form元素的其他元素。
This problem occurs when I apply the inputright style. 当我应用inputright样式时，会发生此问题。 Please explaing what's going on here. 请解释这里发生了什么。
1 个解决方案
解决方案1
2 已采纳 2016-09-09 11:21:28
First you have to close your <form> tag and the main thing to remember is to use clear:both; 首先，您必须关闭<form>标记，要记住的主要事情是使用clear:both; after every div where you have used float css. 在每个使用float css的div之后。
This is must thing while using float as by float we are breaking the flow and pushing element to come inline so when element did not fit in space they got misaligned. 在使用float时这是必须的，因为通过float我们破坏了流程并推动元素内联，因此当元素不适合空间时它们会对齐。 You did not get that issue yet but to save your self by that issue, better use clear:both after every floated div so it will clear the blank space and you will save from that issue. 您尚未遇到该问题，但是要通过该问题来挽救自己，最好在每个浮动div之后使用clear：both，这样可以清除空白并从该问题中进行保存。
Also if you won't clear then it won't appear in inspect too. 另外，如果您不清除，则它也不会出现在检查中。 See my example i have used clear:both after every floated row so there won't be any issue with blank space or inspect element like you are facing. 参见我的示例，我在所有浮动行之后都使用了clear：Both，所以不会像您所面对的那样有任何空白或检查元素的问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.