我正在尝试为自己的网页设计公司构建我的网站。考虑到我在问一个基本问题,我正在这样做,这有点讽刺。另一方面,我只是建立基本网站以获得经验。我的问题是我试图消除标题和导航栏之间的差距。我试图将它们都设置为固定位置,然后设置“顶部”值,但是当浏览器窗口重新调整大小时,一切都不合适。它需要在移动设备和桌面设备上进行响应和查看。
<!DOCTYPE html>
<html>
<head>
<title>Picasso</title>
<link rel="stylesheet" href="styling.css">
</head>
<body>
<header>
<img src="img/pwd_logo_05.png" alt="logo" id="logo">
<h2>For Desktop & Mobile </h2>
</header>
<nav>
<ul>
<li>Donate</li>
<li>Request</li>
<li>Contact</li>
<li>Home</li>
</ul>
</nav>
</body>
<footer>
</footer>
</html>
CSS
header {
background-color: whitesmoke;
}
#logo {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 1.5em;
width: 30%;
height: 30%;
}
h2 {
padding-bottom: 1em;
text-align: center;
font-family: sans-serif;
}
nav {
width: 100%;
background-color: black;
}
ul {
list-style-type: none;
overflow: hidden;
}
li {
text-decoration: none;
text-align: center;
float: right;
padding: .875em 1em;
color: whitesmoke;
font-family: sans-serif;
}
body {
background-image:url(img/background.png);
}
答案 0 :(得分:0)
从padding-bottom: 1em;
css中删除h2
,从padding: .875em 1em;
css中删除li
。
填充将基本上保留元素周围的空间,从而导致您现在看到的差距。从css中删除填充将删除空格。
我建议的内容会回答您的问题,但可能不是最佳解决方案 - 您希望了解一些填充内容,然后更改您的css,以便在正确的位置应用填充并避免错误的。
答案 1 :(得分:0)
这是因为您的标题H2设置了保证金。 尝试设置&#34; margin-bottom&#34;它是0。
&#34; margin-top&#34;同样的事情UL元素。