我目前正忙于我的这个信息学元素(构建一个示例交友网站)。问题是我在把所有东西都放在正确的地方时遇到了一些麻烦。一切都很顺利，直到我的邮箱出现在错误的位置(但是，Dreamweaver 会按照我的意愿显示它)。我不知道如何，我不知道为什么，但我认为它必须对我的边距或填充做些什么。感谢您的帮助!
提前致谢
HTML+CSS(很多词都是荷兰语，我是这一切的初学者，所以请不要指望高质量的代码。我的 HTML 和 CSS 在我的真实元素中的单独文件中。):
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
padding:0;
margin:0;
border:0;
}
body {
background-color:#666;
font-family:corbel;
}
.container {
width: 1240px;
}
#HomeLeftSideRegister {
float:left;
}
.Form {
width: 1240px;
height: 600px;
display:block;
background-color:white;
border-radius: 10px;
margin-top: 111px;
margin-left:auto;
margin-right:auto;
}
#Registreernu {
margin-left:45px;
color: #3c948b;
font-size: 70px;
}
#Home-email {
color: #000;
font-size: 30px;
margin-top: 30px;
margin-left: 245px;
}
.Email {
color:#666;
font-weight:bold;
}
#useremail {
height: 22px;
width: 281px;
font-size: 20px;
border-width: 1px;
border-style:solid;
margin: 10px 0px 10px 149px;
}
.Gender {
color: #000;
font-size: 18px;
height: 155px;
width: 130px;
border: none;
float: left;
margin-left: 25px;
margin-top: 10px;
}
#gender-1 {
margin-left:150px;
}
.Radiolabel {
margin-top: 20px;
}
.Roundbutton {
background-color: #3c948b;
height: 74px;
width: 196px;
border-radius: 10px;
color: white;
font-size: 25px;
font-weight: 500;
float:none;
margin-left:193px;
}
#input {
margin-top: 220px;
}
#BlouseManImage {
float:right;
margin: 44px 70px auto auto;
}
</style>
</head>
<body>
<div id="Content" class="Container">
<section id="Home-Register">
<form class="Form" action="#" >
<div id="HomeLeftSideRegister">
<div id="Registreernu">REGISTREER NU</div>
<h2 id="Home-email">EMAIL:</h2>
<input name="email" type="email" class="Email" id="useremail"/>
<fieldset class="Gender" id="gender-1">
<H3>IK BEN EEN:</H3>
<div class="Radiolabel">
<label>
<input type="radio" name="amman" class="styled-radio" value="Man"/>
Man
</label> <br />
<label>
<input type="radio" name="amvrouw" class="styled-radio" value="Vrouw"/>
Vrouw
</label>
</div>
</fieldset>
<fieldset class="Gender">
<H3 class="">IK ZOEK EEN:</H3>
<div class="Radiolabel">
<label>
<input type="radio" name="likeman" class="styled-radio" value="Man"/>
Man
</label>
<br />
<label>
<input type="radio" name="likevrouw" class="styled-radio" value="Vrouw"/>
Vrouw
</label>
<br />
<label>
<input type="radio" name="likebeide" class="styled-radio" value="Beide"/>
Beide
</label>
</div>
</fieldset>
<div id="input">
<input type="submit" value="GA VERDER" class="Roundbutton">
</div>
</div>
<div id="BlouseManImage"><img src="Images/Man_Registreer.jpg" alt="Ik probeer het gewoon" height="535" width="577" />
</div>
</form>
</section>
<section id="reclame">
</section>
</div>
</body>
</html>
最佳答案
看来你是“ float ”规则的另一个受害者:-)
您的 .Gender div 有 float: left，它使这些 div 向左移动，而您的电子邮件字段必须显示在右侧。
我解决了它使电子邮件字段也 float ，所以它首先到达那里...另外，我必须将你的 2 个 div 分开，因为它们是不同的，并且需要清除上面的 float 以便它进入行以下。
此外，html 必须为 GenderBen 和 GenderZoek 命名两个单独的 div 类。
(我不懂荷兰语，但我认为它代表你的身份和你正在寻找的东西:-D)
修改后的代码为:
.Email {
color:#666;
font-weight:bold;
float: left;
}
.GenderBen {
color: #000;
font-size: 18px;
height: 155px;
width: 130px;
border: none;
float: left;
clear: both;
margin-left: 25px;
margin-top: 10px;
}
.GenderZoek {
color: #000;
font-size: 18px;
height: 155px;
width: 130px;
border: none;
float: left;
margin-left: 25px;
margin-top: 10px;
}
以及更改后的 div 的 html:
<fieldset class="GenderBen" id="gender-1">
<H3>IK BEN EEN:</H3>
<div class="Radiolabel">
<label>
<input type="radio" name="amman" class="styled-radio" value="Man"/>
Man
</label> <br />
<label>
<input type="radio" name="amvrouw" class="styled-radio" value="Vrouw"/>
Vrouw
</label>
</div>
</fieldset>
<fieldset class="GenderZoek">
<H3 class="">IK ZOEK EEN:</H3>
<div class="Radiolabel">
<label>
<input type="radio" name="likeman" class="styled-radio" value="Man"/>
Man
</label>
<br />
<label>
<input type="radio" name="likevrouw" class="styled-radio" value="Vrouw"/>
Vrouw
</label>
<br />
<label>
<input type="radio" name="likebeide" class="styled-radio" value="Beide"/>
Beide
</label>
</div>
</fieldset>
关于html - 邮箱显示在 "random"处，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26853938/