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導航列表重疊文本

回答

相關問題