gpt4 book ai didi

html - CSS 导航列表重叠文本

转载 作者:太空宇宙 更新时间:2023-11-04 01:56:37 25 4
gpt4 key购买 nike

我在 visual studio 2015 中有一个 html 和 css 文档。当我从 html 请求 CSS 文件时,它无法正确加载并与 h1 和 p 标签重叠。

html:

body{
background-color: cyan;
}
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em;
}
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black
}
ul.navbar a {
text-decoration: none
}
a:link {
color: blue
}
a:visited {
color: blue
}
 <!DOCTYPE html>
<html>
<head>
<title>Empty</title>
<meta charset="utf-8" />
<link href="CSS/Style1.css" rel="stylesheet" />
</head>
<body>
<ul class="navbar">
<li><a href="Index.html">Index</a>
<li><a href="Empty.html">Empty</a>
</ul>
<h1>Welcome to Alex's Website, this is not useful at all!</h1>
<p>Text text text, bla bla bla.</p>
</body>
</html>


我不知道是什么导致了这个问题。

最佳答案

position: absolute; 从文档流中移除元素。所以它会遍历你的元素,因为它是 绝对 定位的,并且不受你的其他元素的影响。

删除这个:

position: absolute;
top: 2em;
left: 1em;

来自您的 ul.navbar block 。

或者,如果您不想更改 header 的确切位置,您可以将 padding-top: 100px; 添加到您的 body block 中,以推送您的其余内容放下,让开。

关于html - CSS 导航列表重叠文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42477355/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com