Html 带有CSS的浮动边栏

我设置了一个带有固定位置的特定背景颜色的侧边栏，这样当你向下滚动页面时，它就会保持在原位。直到现在，一切似乎都很好，我修改的唯一一件事就是删除列表样式类型，这样就不会在侧栏中显示项目符号。我不知道，也许我一路上把事情搞砸了，但我就是不知道在哪里

现在，链接正好出现在标题旁边，没有背景色，并且它们不在固定位置

有什么想法吗

包裹{ 宽度：750px； 保证金：0自动； 背景：FFFFFF； 位置：相对位置； } h1{ 保证金：0； 背景：cc9 } 导航{ 填充物：5px10px； 背景：FFF； } 主要{ 浮动：左； 宽度：480px； 填充：10px； 背景：FFF； } 氢{ 边缘：0.01米； } 边栏{ 浮动：对； 宽度：200px； 填充：40px； 背景：99c； 位置：固定； 左边距：520像素； } 页脚{ 明确：两者皆有； 填充物：5px10px； 背景：cc9； } 页脚p{ 保证金：0； } 导航ul{ 保证金：0； 填充：0； 列表样式：无； } 李海军{ 显示：内联； 保证金：0； 填充：0； } 边栏ul{ 列表样式类型：无； } a:链接{ 颜色：黑色 } a:参观了{ 颜色：蓝色 } a:悬停{ 字体大小：粗体 } a:主动的{ 字体：斜体 } .topnavlink{ 清除：左； 左边距：1米； 字体大小：1.1em } .侧导航链接{ 字号：1em } .页脚{ 清除：左； }

&复制；2012年的事 你结束了你的工作，而不是。纠正这一点，一切都应该到位。

你的结束语是，而不是。纠正这一点，所有内容都应该到位。

注释是CSS，应该是/*注释*/ 不 而且 您的html似乎有一些额外的结尾 不确定这是否是因为它是CSS应该是/*注释的一部分*/ 不 而且 您的html似乎有一些额外的结尾 不确定这是否是因为它是更多代码的一部分

您需要结束标记，并且在底部有额外的结束div

<DIV id="sidebar">
            <ul>
                <li><a href="http://www.google.com">Google</a>
                </li>
                <li>
                <a href="mailto:something@google.edu">Email Me</a>
                </li>
            </UL>
        </DIV>

        <DIV id="footer">
            <P> &copy;Something 2012</P>
        </DIV>

你的评论是错误的，应该是这样的

/*main container, gives content area width and centers it horizontally
width of wrap will be subtracted from width of the browser window (its container)*/
#wrap {
width:750px;
margin:0 auto;
background:#FFFFFF;
position: relative;
}

h1 {
margin:0;
background:#cc9
}

#nav {
padding:5px 10px;
background:#FFF;
}

#main {
float:left;
width:480px;
padding:10px;
background:#FFF;
}

h2 {
margin:0 0 1em;
}

/*Setting position to fixed and margin-left will keep sidebar scrolling on page */
#sidebar {
float:right;
width:200px;
padding:40px;
background:#99c;
position:fixed;
margin-left:520px;
}

#footer {
clear:both;
padding:5px 10px;
background:#cc9;
}

#footer p {
margin:0;
}

#nav ul {
margin:0;
padding:0;
list-style:none;
}

#nav li {
display:inline;
margin:0;
padding:0;
}

#sidebar ul {
list-style-type:none;
}


<!--links-->
a:link {
    color: black
}
a:visited {
color: blue
}
a:hover {
font-weight: bold
}
a:active {
font-style: italic
}
.topnavlink {
clear: left; margin-left: 1em; font-size: 1.1em
}
.sidenavlink {
font-size: 1em
}
.footer {
clear: left;
}

你需要结束标签，你有额外的结束div坐在底部

<DIV id="sidebar">
            <ul>
                <li><a href="http://www.google.com">Google</a>
                </li>
                <li>
                <a href="mailto:something@google.edu">Email Me</a>
                </li>
            </UL>
        </DIV>

        <DIV id="footer">
            <P> &copy;Something 2012</P>
        </DIV>

你的评论是错误的，应该是这样的

/*main container, gives content area width and centers it horizontally
width of wrap will be subtracted from width of the browser window (its container)*/
#wrap {
width:750px;
margin:0 auto;
background:#FFFFFF;
position: relative;
}

h1 {
margin:0;
background:#cc9
}

#nav {
padding:5px 10px;
background:#FFF;
}

#main {
float:left;
width:480px;
padding:10px;
background:#FFF;
}

h2 {
margin:0 0 1em;
}

/*Setting position to fixed and margin-left will keep sidebar scrolling on page */
#sidebar {
float:right;
width:200px;
padding:40px;
background:#99c;
position:fixed;
margin-left:520px;
}

#footer {
clear:both;
padding:5px 10px;
background:#cc9;
}

#footer p {
margin:0;
}

#nav ul {
margin:0;
padding:0;
list-style:none;
}

#nav li {
display:inline;
margin:0;
padding:0;
}

#sidebar ul {
list-style-type:none;
}


<!--links-->
a:link {
    color: black
}
a:visited {
color: blue
}
a:hover {
font-weight: bold
}
a:active {
font-style: italic
}
.topnavlink {
clear: left; margin-left: 1em; font-size: 1.1em
}
.sidenavlink {
font-size: 1em
}
.footer {
clear: left;
}

---

尽管尝试过，但一切都没有改变。谢谢你指出，尽管我尝试过，但一切都没有改变。谢谢你指出这一点