个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我不知道，但我的段落位于导航栏后面我是 html 和 css 新手下面是代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> First App </title>
<link rel="stylesheet" href ="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li class = "a"> <a href = "#"> Google </a></li>
<li class = "b"> <a href = "#"> Youtube </a></li>
<li> <a href = "#"> Facebook </a></li>
<li> <input type="text"> <button> Press Here </button></li>
</ul>
</nav>
</header>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicin
g elit. Est tempora quasi ipsum commodi
. Atque ut officia magnam et eaqu
e dolorum incidunt? Hic eos
ipsam assumenda itaque dese
runt voluptas porro libero?
</p>
</body>
</html>
CSS
body {
background-color:white;
}
nav {
background-color:blue;
position:fixed ;
top:0;
left:0;
right:0;
}
li {
display:inline-block;
padding: 5px;
margin:10px;
color:white;
}
li.b:hover {
border-bottom:red;
}
好吧，您可以看到文本隐藏在导航栏后面，我不知道为什么会发生这种情况。另外，我是 HTML 和 CSS 的初学者。
提前致谢
最佳答案
发生这种情况是因为 nav 已被分配了 position:fixed 到顶部，所以现在无论 nav 的高度占据了屏幕将保持固定，即无论发生什么情况都会分配给它，而正文上的其他内容将以正常行为运行，忽略nav的位置，因此分配padding 空间等于 nav height 可能会解决该问题。
body {
background-color:white;
}
nav {
background-color:blue;
/* happening because of this */
position:fixed ;
top:0;
left:0;
right:0;
}
li {
display:inline-block;
padding: 5px;
margin:10px;
color:white;
}
/* add this */
p{
padding-top: 75px;
}
li.b:hover {
border-bottom:red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> First App </title>
<link rel="stylesheet" href ="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li class = "a"> <a href = "#"> Google </a></li>
<li class = "b"> <a href = "#"> Youtube </a></li>
<li> <a href = "#"> Facebook </a></li>
<li> <input type="text"> <button> Press Here </button></li>
</ul>
</nav>
</header>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicin
g elit. Est tempora quasi ipsum commodi
. Atque ut officia magnam et eaqu
e dolorum incidunt? Hic eos
ipsam assumenda itaque dese
runt voluptas porro libero?
Lorem, ipsum dolor sit amet consectetur adipisicin
g elit. Est tempora quasi ipsum commodi
. Atque ut officia magnam et eaqu
e dolorum incidunt? Hic eos
ipsam assumenda itaque dese
runt voluptas porro libero?
Lorem, ipsum dolor sit amet consectetur adipisicin
g elit. Est tempora quasi ipsum commodi
. Atque ut officia magnam et eaqu
e dolorum incidunt? Hic eos
ipsam assumenda itaque dese
runt voluptas porro libero?
Lorem, ipsum dolor sit amet consectetur adipisicin
g elit. Est tempora quasi ipsum commodi
. Atque ut officia magnam et eaqu
e dolorum incidunt? Hic eos
ipsam assumenda itaque dese
runt voluptas porro libero?
</p>
</body>
</html>关于html - 为什么该段落隐藏在导航栏后面，但导航栏在 html 源代码中排在第一位？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63917794/
24
4
0
我正在编写一个 Java 应用程序，该应用程序检查网页的源代码，并在满足源代码中的条件时在我的默认浏览器中向我显示该网页。我通过以下方式获取源代码: String source = getUrlSou
数周以来，我一直在为 Android 上的蓝牙项目而苦苦挣扎。有谁知道我可以去哪里查看 Google 用于使其蓝牙配对和连接逻辑正常工作的实际代码？ 我浏览了所有的文档、BluetoothChat 应
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。 关闭 4 年前。
Android 源代码有多个目录，其中包含针对不同设备的代码。此外，在特定目录中，存在显示不同分支和标签的路径。举个例子，在“android/platform/external/iptables”目录
在哪里可以找到 SQLMembershipProvider (.NET2.0) 的源代码？ 是可用的么？ 最佳答案 源代码已经发布。 See ScottGu's blog for further de
我只想知道如何下载特定版本的 Android 源代码。我已经尝试过以下命令 repo init -u https://android.googlesource.com/platform/manifes
我想看看OpenCL框架是如何实现的。我发现的只是已经编译好的可供下载的库。 当然，OpenCL 可以有许多不同的实现，但我想看看其中的一个来了解它是如何完成的。 为了确保我自己清楚，OpenCL 框
latex 源代码列表应该是什么样子才能产生像已知书籍中那样的输出，例如 Spring 框架的输出？我尝试过使用 latex 列表包，但无法生成看起来像下面一样好的东西。因此，我主要对生成类似以下示例
PHP 是用 C 语言编写的吗？我在哪里可以在线找到 PHP 源代码而无需下载全部内容？ 最佳答案 PHP 函数是用 C 编写的 - 您可以在 lxr.php.net 找到可浏览的源代码. 例如:ht
我正在使用Elasticsearch OSS的官方Docker镜像(docker.elastic.co/elasticsearch/elasticsearch-oss:6.2.4)，似乎完全无法使用s
我试图在Cython中同时编译C和C++源代码。这是我当前的设置: -setup.py from distutils.core import setup from Cython.Build impor
好吧，事情是这样的:你们所有人可能都在想同样的事情:您可以使用 driver.getPageSource(); 这部分是正确的。唯一的问题是源代码以一种相当奇怪的方式编译，所有代码都在其中 \&quo
由于 TwoLineListItem 自 API 17 起已被弃用，因此我已采取措施将其替换为自定义 XML 和 ViewHolder。但是，我真的希望我的应用程序看起来与使用 TwoLineList
要从 HttpURLConnection 获取 InputStream，我们的代码如下 urlConnection.getInputStream(); 如果InputStream是一个Abstract
我刚刚开始学习更多关于 C/C++ 的知识，我正在使用 Visual Studio 2013 来管理代码。 我正在使用 Tobii EyeX 眼睛注视系统的项目要求我能够稍微调整此代码，但是我不明白如
我在按钮上有一个IBAction，其中包含以下代码，我尝试使用它来检索 UIWebView 的源代码: - (IBAction)loadInAWebView:(id)sender { [self
我正在 asp.net 中创建一个网站，我只是想知道有什么方法可以使用 JavaScript 从图像生成调色板吗？类似于 1) http://www.cssdrive.com/imagepalette
有人可以分享 WinKill() from AutoIt 的源代码吗？ ？ 我想知道它如何处理消息(是/否/取消)以确保它得到正确处理。我想用它来清理桌面上的意外弹出窗口。 最佳答案 正如我们在下面的
我的问题与 Opencv 的源代码有关。在我看来不同的平台the Opencv website提供不同的代码结构。我只是想知道是否有可能为所有不同的平台提供一个源代码。使用相同的源代码，我可以针对不同
这个问题在这里已经有了答案: Convert Python program to C/C++ code? [closed] (8 个答案) 关闭 3 年前。 我一直在努力寻找一种方法将 .py 源文
我是一名优秀的程序员,十分优秀！