Question

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

Answer 1

1）你的html有一个错误 - 你给了/而不是/ a：

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

2）浮动救援：将此财产交给：

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

并将float：right添加到#sidbar

3）什么是边框：在#sidebar中瘦？给边框：1px实体。请阅读此内容，了解允许的属性及其值：http://www.w3schools.com/css/css_border.asp

<强>更新

点击此处：http://jsfiddle.net/FPJTn/1/ 由于内容宽度的值，侧栏正在突破到下一行。我已将#content css从width：800px更改为width：auto。

边栏边框未显示

1 个答案: