2017-08-14 56 views
-2

我對編碼真的很陌生,我相信這會在某個地方得到解答。但到處都是我看不懂。當我使用text-align: center來對齊我的導航時,它會出現在徽標所在的行的下方,就好像它正在阻止它移動到頁面頂部一樣。當我選擇圖像時,您可以看到它here(HTML/CSS)爲什麼我的導航欄不能進入頁面頂部?

我已經嘗試使用邊距,但我無法得到該菜單上去。我也嘗試過使用display: inline,但是它爲我的導航添加了額外的大小,並且仍然不會觸及頁面的頂部,因爲我在選擇時會看到here

下面的代碼:

head {} 
 

 
body { 
 
    background-image: url(img/background.jpg); 
 
} 
 

 
.logo { 
 
    display: inline; 
 
} 
 

 
div.nav { 
 
    display: inline; 
 
} 
 

 
div.content { 
 
    text-align: center; 
 
}
<!DOCTYPE html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>LiaamB Home</title> 
 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
 
    <link rel="shortcut icon" type="image/png" href="img/icon.png" /> 
 
</head> 
 
<a href="index.html"><img src="img/logo.png" width=200 height="200" class="logo"></a> 
 
<img src="img/worktitle.png" width="200" height="200"> 
 
<div class="nav"> 
 
    <a href="index.html"><img src="img/home.png" width="250" height="100"></a> 
 
    <a href="work.html"><img src="img/work.png" width="250" height="100"></a> 
 
    <a href="store.html"><img src="img/store.png" width="250" height="100"></a> 
 
    <a href="contact.html"><img src="img/contact.png" width="250" height="100"></a> 
 
    <a href="videos.html"><img src="img/videos.png" width="250" height="100"></a> 
 
</div> 
 
</head> 
 

 
<body> 
 
    <div class="content"> 
 
    <img src="img/about.png" width="1500" height="150"> 
 
    </div> 
 
</body> 
 

 
</html>

+0

提供了一個js小提琴,我可能會提供幫助。 –

+2

您的導航div不在html內部。 – hairmot

+0

林不知道什麼是js小提琴?即時通訊,所以對不起,即時通訊新,並花了至少4小時試圖解決這個問題:) – LiaamB

回答

0

你的頭標記兩次關閉。這應該工作

<!DOCTYPE html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>LiaamB Home</title> 
    <link rel="stylesheet" type="text/css" href="style.css"/> 
    <link rel="shortcut icon" type="image/png" href="img/icon.png"/> 
</head> 
<body> 
    <a href="index.html"><img src="img/logo.png" width=200 height="200" class="logo"></a> 
    <img src="img/worktitle.png" width="200" height="200"> 
    <div class="nav"> 
     <a href="index.html"><img src="img/home.png" width="250" height="100"></a> 
     <a href="work.html"><img src="img/work.png" width="250" height="100"></a> 
     <a href="store.html"><img src="img/store.png" width="250" height="100"></a> 
     <a href="contact.html"><img src="img/contact.png" width="250" height="100"></a> 
     <a href="videos.html"><img src="img/videos.png" width="250" height="100"></a> 
    </div> 
    <div class="content"> 
    <img src="img/about.png" width="1500" height="150"> 
    </div> 
</body> 
</html> 
+1

Whew。我錯過了兩個頭標籤位。感謝這一點。但我嘗試了這兩個代碼,並且仍然在導航頂部添加了間距,就像它與徽標一樣高。並且不會打到頁面頂部:( – LiaamB

0

像@hairmot說,你有你的<div class="nav">元素的body之外。您還有兩個關閉</head>標籤。修復這兩個錯誤應該可以解決您的問題。

這裏是你的代碼有固定的兩個問題:

head {} 
 

 
body { 
 
    background-image: url(img/background.jpg); 
 
} 
 

 
.logo { 
 
    display: inline; 
 
} 
 

 
div.nav { 
 
    display: inline; 
 
} 
 

 
div.content { 
 
    text-align: center; 
 
}
<!DOCTYPE html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>LiaamB Home</title> 
 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
 
    <link rel="shortcut icon" type="image/png" href="img/icon.png" /> 
 
</head> 
 

 
<body> 
 
    <a href="index.html"><img src="img/logo.png" width=200 height="200" class="logo"></a> 
 
    <img src="img/worktitle.png" width="200" height="200"> 
 
    <div class="nav"> 
 
    <a href="index.html"><img src="img/home.png" width="250" height="100"></a> 
 
    <a href="work.html"><img src="img/work.png" width="250" height="100"></a> 
 
    <a href="store.html"><img src="img/store.png" width="250" height="100"></a> 
 
    <a href="contact.html"><img src="img/contact.png" width="250" height="100"></a> 
 
    <a href="videos.html"><img src="img/videos.png" width="250" height="100"></a> 
 
    </div> 
 

 
    <div class="content"> 
 
    <img src="img/about.png" width="1500" height="150"> 
 
    </div> 
 
</body> 
 

 
</html>

+1

其仍然添加間距https://gyazo.com/763e4cfd24b250ee66a745faf1294581 – LiaamB

0

感謝您的幫助球員:)我想我會只需添加上的標識和工作頭銜,使其利潤率內嵌導航。然後只處理頁面頂部的間距:)再次感謝。

相關問題