不显示边栏边框

我正在编写网站代码，但我无法显示边栏的边框。 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

不显示边栏边框

回答

相关问题