gpt4 book ai didi

html - float div 重叠

转载 作者:太空宇宙 更新时间:2023-11-03 20:56:00 25 4
gpt4 key购买 nike

我有以下代码,它已简化以演示问题。 menuholder div 不在 form div 中,但它是以这种方式显示的。它必须在它的右边,这是发生这种情况的任何原因吗?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Website</title>

<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #000;
background-color: #FFFFFF;
}

#header {
width: 900px;
height: 600px;
border: 2px dashed #906;
}

#website {
width: 150px;
height: 90px;
float: left;
border: 2px dashed #F00;
}

#form {
width: 300px;
height: 200px;
float: left;
border: 2px dashed #906;

}
#menuholder {
width: 220px;
height: 200px;
float: left;
border: 2px dashed #30F;
}
</style>

</head>
<body>
<div id="header">
<div id="website">
<h1><a href="#">Website</a></h1>
</div>

<div id="form">
<form action="login.php" method="POST">
<table>
<tr>
<td>
Username:
</td>
<td>
<input type="text" name="username">
</td>

</tr>


<tr>
<td>
Password:
</td>
<td>
<input type='password' name='password'>
</td>

</tr>

<table>
<p>
<input type='submit' name='submit' value='Login'>
<p>
<a href='register.php'> Register!</a>
</div>

<div id="menuholder">
<ul id="menu">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">register</a></li>
<li><a href="#">about application</a></li>
<li><a href="#">demo</a></li>
<li><a href="#">help</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
</div>



</body>
</html>

在 google inspect 上,它显示 div menuholder 位于表单的 div 中。但是,在我的代码中,它不是。我能够在 google inspect 中拖放,它看起来不错。我该如何修复我的代码以使其不必执行此操作?

最佳答案

  • 表格的结束标记应该是 </table>
  • 你错过了结尾 </form>标签。
  • p 标签的结束标签应该是 </p>
  • 输入未正确关闭(应以 /> 而非 > 结尾

如果您还没有这样做,我建议您在每次打开 html 节点时按 Tab 键进入,在每次关闭节点时按 Tab 键退出。这将帮助您查看标签未关闭的位置。

关于html - float div 重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10440528/

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