CSS导航列表重叠文本

我在Visual Studio 2015年将HTML和CSS文件。当我要求从HTML CSS文件，它无法正确加载和重叠的H1和p标签。CSS导航列表重叠文本

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> 
 
\t <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>

我不`吨知道是什么原因造成了这个问题。

来源

2017-02-27 user6481546

position: absolute;去除从文档流动的元件。所以，因为它被定位绝对，且不受您的其他元素它会在你的元素。

删除此：

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

从你ul.navbar块。

或者，如果你不想改变的确切位置标题是，你可以添加padding-top: 100px;您body块，把你的内容的其余部分了，不碍事。

来源

2017-02-27 04:07:26

如果你正在谈论重叠h1或p标签的列表，我认为它是因为你有ul.navbar - position：absolute。删除它，并尝试别的东西。

来源

2017-02-27 03:55:11 ManishP33

CSS导航列表重叠文本

回答

相关问题