0

問題を示すために簡略化された次のコードがあります。menuholder div はフォーム 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 インスペクトでは、div メニューホルダーがフォームの div 内に格納されていることが示されています。ただし、私のコードではそうではありません。Google inspectでドラッグアンドドロップできましたが、正しく見えます。コードを修正して、これを行う必要がないようにするにはどうすればよいですか?

4

3 に答える 3

3
  • テーブルの終了タグは</table>
  • </form>終了タグがありません。
  • p タグの終了タグは</p>
  • 入力が適切に閉じられていません (not で終了する必要があります/>)>

まだ行っていない場合は、html ノードを開くたびにタブで移動し、閉じるたびにタブで移動することをお勧めします。これにより、タグが閉じられていない場所を確認できます。

于 2012-05-03T23:08:16.807 に答える
1

テーブル？形に!?

  • <table>タグを閉じる
  • <form>タグを閉じる
  • <p>タグを閉じる
于 2012-05-03T23:09:37.680 に答える
1

その冒頭のコメントは、私たちがそれに取り組んでいる間、締めくくりにも行うことができます..

<style type="text/css">
<!--
于 2012-05-04T00:31:46.677 に答える