浮動的div重疊

我有下面的代碼，它簡化了證明的問題。 menuholder div不在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>

在谷歌檢查，它顯示div菜單的持有人是在窗體的div內。但是，在我的代碼中，事實並非如此。我能夠拖放谷歌檢查，它看起來是正確的。我如何修復我的代碼，使其不必這樣做？

來源

2012-05-03 Ryan Sinclair

爲表格中的關閉標籤應該是</table>
你錯過收盤</form>標籤。
您p標記的結束標記應該是</p>
的輸入不正確（封閉/>不>

應該結束了。如果你沒有準備好，我建議在每個跳格一次打開了一個HTML節點，並在每次關閉一次Tab鍵了。這將幫助你看到標籤沒有被關閉。

來源

2012-05-03 23:08:16 kroehre

哎呀愚蠢的我，謝謝 –

並執行/表格後提交或之前它去？ –

後，它看起來像它應該出現在你結束p標記 – kroehre

的表？在一個形式？

關閉您<table>標籤
閉上你的<form>標籤
閉上你的<p>標籤

來源

2012-05-03 23:09:37 Chords

有點苛刻... – kroehre

指導語義標記通過感嘆號後:) – Chords

沒有什麼一個語義有關在形式的表格，這是排隊的常見方式標籤和輸入。 – kroehre

在打開言論可能有密切做的一樣好，而我們在這..

<style type="text/css"> 
<!--

來源

2012-05-04 00:31:46 adriatiq

好抓！我會對此讚不絕口。 – Chords

浮動的div重疊

回答

相關問題