Question

我想知道是否有人可以帮助我理清为什么我的导航菜单似乎在我的主要div中，当它没有这样编码时。我猜CSS是问题所在。很多代码我很害怕，但我不知道问题在哪里，所以我无法隔离它....

<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="container">
    <div id="header"><p><img src="images/logo.png" alt="logo" /></p></div><!--header-->
    <div id="navbar">
        <div id="holder">
        <ul> 

   <li><a href="#" id="onlink">Home</a></li>
   <li><a href="#">My Approach</a></li>
   <li><a href="#">Testimonials</a></li>
   <li><a href="#">Fees</a></li>
   <li><a href="#">Contact</a></li>

        </ul>

        </div><!--holder(navbar)-->
    </div><!--navbar-->
    <div id="main">main</div><!--main-->

</div><!--container-->
<body>
</html>

CSS：

body {
    background-image: url(images/colorful7.jpg);
}
#container {
    width: 960px;
    float: none;
    margin: auto;
    height: auto;
}
#header {
    height: 350px;
    width: 940px;
    padding: 10px;
    }
#navbar {
    background: none;
    height:40px;/*40*/
    width:960px;
    float:right;
 } 

 #navbar #holder {
    height:40px;
    width:725px;/*725*/
    float: right;
 } 

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

 #navbar #holder ul li a {
    text-decoration:none;
    float:left;
    line-height:20px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:600;
    color:#660033;
    border-bottom:none;
    padding:10px;
    width:120px;
    text-align:center;
    display:block;
    background:#FFC;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
    margin-left: 5px;
 } 

 #navbar #holder ul li a:hover {
    background:#660033;
    color:#FFC;

 } 
#holder ul li a#onlink {
    background:#660033;
    color:#FFC;
 } 

 #holder ul li a#onlink:hover {
  background:#660033;
  color:#white;
  text-shadow:1px 1px 1px #000; 
 }
 #main{
    background-color: #FFC;
    height: 400px;
    width: 960px;
    padding: 10;
}

这是一个实时jsFiddle

Answer 1

添加

clear: both;

到#main - 规则以清除导航栏后的浮动。小提琴：http://jsfiddle.net/GGSk2/2/

Answer 2

如果您认为问题出在CSS中，请尝试停用css并查看会发生什么。您可以通过逐个添加css片来追踪故障位。

我经常使用带有Firebug的Firefox来帮助我找出这些问题。它允许您动态停用或修改CSS和HTML。我估计IE和Safari也允许它。

Answer 3

删除float：right;来自#navbar

#navbar {
    background: none;
    height:40px;/*40*/
    width:960px;

}

http://jsfiddle.net/G26TD/10/

Answer 4

我已经改变了CSS＆amp;它的工作

工作小提琴：http://jsfiddle.net/G26TD/11/

不要在id中使用ID来设置它会降低CSS的速度

以下是如何高效编写css的帖子：https://developer.mozilla.org/en/CSS/Writing_Efficient_CSS

关于div的困惑

4 个答案: