2017-08-14 78 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

感谢您的帮助球员:)我想我会只需添加上的标识和工作头衔,使其利润率内嵌导航。然后只处理页面顶部的间距:)再次感谢。