1. 首页
  2. 问题列表
  3. 为什么我的文本显示在我的导航栏后面？ HTML/CSS
提问者：小点点

为什么我的文本显示在我的导航栏后面？ HTML/CSS


我建立了我的第一个网站，我做了一个导航栏。 但是当我想要向页面添加文本时，它会从导航栏后面（在左角）开始。 唯一能使文本居中向下的方法是使用边距使其向下。 有人知道我做错了什么吗？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="language" content="swedish"> 
        <meta http-equiv="content-type" content="text/html">
        
        <title>
            Kontakt
        </title>
        <link rel="stylesheet" href="style.css">
        <link rel=script href="script.js">
        <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@200&display=swap" rel="stylesheet">

        <nav>
            <ul>
                <li><a href="index.html">Hem</a></li>
                <li><a href="jag.html">Vem är jag?</a></li>
                <li><a href="projekt.html">Mina projekt</a></li>
                <li><a href="kontakt.html">Kontakt</a></li>
            </ul>
            </nav>

    </head>
    
<body>
    <h1>hej</h1>

    
</body>
</html>

共3个答案

匿名用户

您将nav标记移动到了head标记，这是一个严重错误。 你需要这样:

null

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="language" content="swedish">
    <meta http-equiv="content-type" content="text/html">
    <title>
      Kontakt
    </title>
    <link rel="stylesheet" href="style.css">
    <link rel=script href="script.js">
    <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@200&display=swap" rel="stylesheet">
  </head>
  <body>
    <h1>hej</h1>
    <nav>
      <ul>
        <li><a href="index.html">Hem</a></li>
        <li><a href="jag.html">Vem är jag?</a></li>
        <li><a href="projekt.html">Mina projekt</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
      </ul>
    </nav>
  </body>
</html>

匿名用户

对不起！ 这是我的样式表

body {
    background-color: grey;
    font-family: Arial, Helvetica, sans-serif;
}

* {
    margin: 0;
    padding: 0;
}

nav {
    width: 100%;
    height: 100px;
    background-color: white;
    overflow: auto;
    position: fixed;
    
}

ul {
list-style-type: none;
margin: 0px;
padding: 0;
overflow: hidden;
}

li {
    float: left;
    line-height: 100px;
    
    

}

a {
color: black;
text-decoration: none;
display: block;
width: 100px;
text-align: center;
font-size: 17px;
padding: 0 20px;
font-family: Arial, Helvetica, sans-serif;


}

a:hover {
    background-color: grey;
    color: lavenderblush;}
}

匿名用户

您还需要显示您的CSS。 此外，你的导航应该在身体部分，而不是在头部。

相关问题