gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 02:13:05 25 4
gpt4 key购买 nike

我是 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 元素应该突出显示,而不是表单元素的其他元素。

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

最佳答案

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

这是使用 float 时必须做的事情,因为通过 float 我们打破了流程并插入元素内联,所以当元素不适合空间时,它们会错位。您还没有遇到那个问题,但是为了解决这个问题,最好在每个 float 的 div 之后使用 clear:both ,这样它会清除空白区域,您就可以避免那个问题。

此外,如果您不清除,那么它也不会出现在检查中。看我的example我在每个 float 行之后都使用了 clear:both,所以不会有任何空白或检查元素的问题,就像您所面对的那样。

关于在 firefox 的检查器中查看时覆盖整个表单的 HTML div 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39410210/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com