不顯示邊欄邊框

我正在編寫網站代碼，但我無法顯示邊欄的邊框。 Here是。以下是代碼，不顯示邊欄邊框

<!DOCTYPE html > 
<!--HTML WEBSITE 
/*********************************************************************************************************************************************************NAME:FAHAD UDDIN********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************* 
--> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>The New Boston</title> 
<style type="text/css"> 
#container 
{ 
    padding:0px; 
    margin:0px; 
    background:#BFBFBF; 
} 
#header 
{ 
    height:100px; 
    background-color:#333; 

} 
#header logo 
{ 

} 
#navigation 
{ 
    padding:0px; 
    margin:0px; 
} 
#navigation ul 
{ 
     background-color:#F00; 
} 
#navigation ul li 
{ 
    text-decoration:none; 
    display:inline; 
    color:white; 
    font-size:16px; 
    padding-right:40px; 
    padding-top: 0px; 
} 
#sidebar 
{ 
    display: inline; 
    margin-left: 20px; 
    width: 300px; 
    height:800px; 
    border-bottom-color:#666; 
    border:thin; 
    background-color: white; 
    background-repeat:repeat; 
} 
#content 
{ 
    float:left; 
    height: 800px; 
    width: 800px; 
    background-color:#FFF; 
    display:inline; 

} 
#footer 
{ 
    clear:both; 
    height:200px; 
    background-color:#333; 
} 
</style> 

</head> 

<body> 
    <div id="container"> 
      <div id="header"> 
      </div> 
      <div id="navigation"> 
       <ul> 
        <li><a href="#"><a/>Home</li> 
        <li><a href="#"><a/>Home</li> 
        <li><a href="#"><a/>Home</li> 
        <li><a href="#"><a/>Home</li> 
        <li><a href="#"><a/>Home</li> 

       </ul> 
      </div><!--Header Ends--> 
     <div id="content"> 
     <p>This is the complain area. Fill complains here</p> 
     </div><!--Content ENDS--> 
     <div id="sidebar"> 
     <p>This is a website.</p> 
     </div><!--SIDEBAR ENDS--> 
     <div id="footer"> 
     </div><!--FOOTER ENDS--> 
    </div><!--CONTAINER ENds--> 
</body> 
</html>

來源

2012-01-20 Fahad Uddin

1）你的HTML有一個bug-你給的/不是/一：

<li><a href="#"><a/>Home</li>

2）浮動救援：讓在這個屬性：

<p style="float: left">This is a website.</p>

，並添加浮動：權利#sidbar

3）什麼是邊界：薄#sidebar？給邊框：1px實心。閱讀此爲允許屬性和值：http://www.w3schools.com/css/css_border.asp

UPDATE

入住這裏：http://jsfiddle.net/FPJTn/1/ 側邊欄被打破，因爲對於寬度爲內容中數值的下一行。我已將#content css從寬度：800px更改爲寬度：auto。

來源

2012-01-20 10:20:04 Ninja

謝謝。但它仍然不能正常顯示。它顯示下面的邊欄。 –

在JSFiddle中，您是否嘗試將html輸出窗口完全移動到左側？如果你這樣做，你會看到側邊欄不會下面。你已經將邊欄的寬度固定爲300px - 使其寬度爲：auto也是如此 – Ninja

選中此項，邊欄寬度設置爲auto：http://jsfiddle.net/FPJTn/2/ – Ninja

不顯示邊欄邊框

回答

相關問題