サイドバーの境界線が表示されない

ウェブサイトのコードを作成していますが、サイドバーの境界線を表示できません。 Hereです。救助へサイドバーの境界線が表示されない

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

2）フロート：このプロパティを与え、以下のコード、

<!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-あなたが/ /の代わりに与えてくれたを持ってはいます：

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

とフロートを追加します。#sidebarに薄い：

3を#sidbarする権利）の境界線とは何ですか？ボーダーを与える：1pxソリッド。許可される属性とその値のためにこれを読む：

チェックここhttp://www.w3schools.com/css/css_border.asp

UPDATE：http://jsfiddle.net/FPJTn/1/ サイドバーが原因で、コンテンツの幅に指定された値の次の行に破壊されました。 #content CSSからwidth：800pxからwidth：autoに変更されました。

出典

2012-01-20 10:20:04 Ninja

ありがとうございました。しかし、それはまだ適切に表示されていません。下のサイドバーを示しています。 –

JSFiddleでは、html出力ウィンドウを完全に左に移動しようとしましたか？そうした場合、サイドバーが下にはないことがわかります。サイドバーの幅を300pxに固定しました。幅を自動にします： – Ninja

これをチェックして、サイドバーの幅をautoに設定します：http://jsfiddle.net/FPJTn/2/ – Ninja

サイドバーの境界線が表示されない

答えて

関連する問題