CSS - 定位div的

我有三級div的我的工作：主要，這是其他兩個容器，頭只由現在的圖像，並且導航其中有一些鏈接。現在，我無法直接在導航div下面定位導航div，它們之間總是有一行主div。有關如何去做這件事的任何建議？CSS - 定位div的

HTML：

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

<body> 
    <div class="main"> 

     <div class="header"> 
     <img src="images/logo.jpg" /> 
     </div> 

     <div class="navigation"><ul id = "linkbar"> 
     <li><a href="">Home</a></li> 
     <li><a href="">Guestbook</a></li> 
     <li><a href="">Contact</a></li> 
     <li><a href="">Quotes</a></li> 
     <li><a href="">Links</a></li></ul> 
     </div> 
    </div> 

</body> 

</html>

CSS：

body { 
    background-color: gray; 

    margin:0px; 
    padding:0px; 

} 

.header { 
    background-color:white; 
} 

.main { 
    background-color: yellow; 
    text-align: center; 
    width: 900px; 
    margin: auto; 
} 
    a:link {color:white; text-decoration:none;}  /* unvisited link */ 
    a:visited {color:white; text-decoration:none;} /* visited link */ 
    a:hover {color:red; text-decoration:underline;} /* mouse over link*/ 
    a:active {color:red; text-decoration:underline;} /* selected link */ 

.navigation { 
    text-align: center; 
    background-color: f8901f; 
} 

#linkbar li { 
    margin: 0px 20px 0px 20px; 
    padding: 11px 0px 10px 0px; 
    list-style-type: none; 
    display: inline; 
    line-height: 2.5em; 
}

來源

2011-04-15 tim

包括以下代碼在您的CSS。

ul#linkbar{margin-top:0;}

來源

2011-04-15 22:19:00 Jaspero

做到了！謝謝！ – tim 2011-04-15 22:22:44

不用doctype，你是在 '怪癖模式'。添加爲您的第一線，看看我們所處的位置：<!doctype html>

來源

2011-04-15 22:13:28 Rob

好知道，我還沒有被宣佈了一段DOCTYPE。 – tim 2011-04-15 22:24:47

正如@Rob指出的那樣，你需要add a doctype作爲第一行如：

<!DOCTYPE html>

逃脫Quirks Mode。

假設是不是唯一的問題，試試這個：

#header img { 
    vertical-align: top 
}

如果我理解正確的，這應該解決這個問題：

始終是主要的div的一行在之間他們

來源

2011-04-15 22:15:30 thirtydot

我似乎找到了空間的事實，圖像是內聯元素引起的。

嘗試添加：

.header img { 
    display:block; 
}

和ofcourse添加一個有效的doctype讓您身在標準模式

來源

2011-04-15 22:19:03 Galen

CSS - 定位div的

回答

相關問題