html - 我的“菜单”类不粘在屏幕顶部,当我做填充时高度自动不起作用
问题描述
好的,我知道标题有点令人困惑,但这里有一个描述。我在html中有一个标题标签,在css中有一个全屏背景。屏幕顶部是菜单,应该保留在那里(滚动时不要粘在屏幕顶部)。此外,当我将高度设置为自动并且我为“a”元素高度设置填充时,我从未遇到过这个问题,它不遵循 a 元素的填充,然后在背景和屏幕顶部之间存在间隙。所以为了解决我写的问题,margin-top: -20px;
但它看起来像这样。
图片 1
如果我删除 margin-top 它看起来像这样:
图片 2
同样,我以前从未遇到过这个问题,这里是代码:HTML:
<!DOCTYPE html>
<html>
<head>
<title>Smart Hosting | Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="./css/main.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300"
rel="stylesheet">
</head>
<body>
<header>
<div class="menu">
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Log In</a></li>
<li><a href="#">Sign Up</a></li>
</ul>
</div>
</header>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
font-family: Roboto;
}
body, html {
width: 100%;
height: 100%;
}
header {
background: url(./img/server.jpg) 50% 50%;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.menu {
background: #1C2F51;
width: 100%;
height: 70px;
}
.menu ul {
list-style: none;
}
.menu li {
display: inline;
background: #25CFB0;
padding: 30px;
}
.menu a {
color: white;
text-decoration: none;
font-size: 20px;
}
解决方案
使用display: inline-block
而不是inline
为您的 li 元素。边距并不总是符合您对内联元素的期望。
.menu ul {
list-style: none;
margin-top: 0px; //to remove the blank space at the top
}
.menu li {
display: inline-block;
background: #25CFB0;
padding: 30px;
}
推荐阅读
- python - 如何获取重定向的 URL?
- connection - Aws 与 Teradata 的胶水连接
- terraform - 如何为 EC2、安全组和 ebs 卷进行 for_each 和 for 循环?
- three.js - Threejs加载JSON格式模型点击标记点局部变色问题
- asp.net-core - 拥有具有 2 个不同模型属性的 .net 核心项目
- visual-studio-code - VS Code拆分视图可以在来回时将光标“锁定”在同一个拆分上吗?
- java - jvm args JAVA_TOOL_OPTIONS:'-Djdk.attach.allowAttachSelf=true' 到 CloudFormation 模板-AWS lambda 函数-无法附加到 VM 和加载代理
- git - VSCode 提交不使用我实际的 github 帐户,而是依赖 user.name 和电子邮件
- angular - Ng zorro 角度验证表格
- amazon-emr - 在 EMR 集群上安装 anaconda 时磁盘空间不足