个人中心
gpt4 book ai didi

html - 为什么我的标签和输入出现在我的导航栏中？

转载 作者：太空宇宙 更新时间：2023-11-04 05:45:52 25 4
gpt4 key购买 nike

我正在模拟一个网站作为一项任务，我的文本出现在我的导航栏后面。我需要它位于导航栏下方，我该如何解决这个问题？

所以我尝试将 margin-bottom 设置为 50px 并将其设置为重要。我试过将导航栏设置为静态。

我也试过搞乱一堆不同的设置，但我似乎找不到合适的东西。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="gregslist.css" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
  </head>
   <header>
        <nav> 

            <ul>
                <li class="greg">Greg's List</li>
                <li><a href="Post.asp">Post</a></li>
                <li><a href="Account.asp">Account</a> </li>
            </ul>
         </nav>
    </header>

  <body>
    <div class="search"> 
      <input type="text" placeholder="Search Software Jobs"> </input>
      <label> Search Jobs </label> </div>


  </body>
</html>



head{
font-family: 'Roboto', sans-serif;
height:100%vh;

}

nav{
  top:0;
  right:0;
  left:0;
  background-color:#dddd;
  position:fixed;
  padding:10px;
}

ul {
  width:100%vp;
    margin: 0;
    padding: 0;
    }

li {
    list-style-type: none;
    float: right;
    text-align:center;

}

 .greg{
  float:left;
  text-align:center;
  font-size:25px;
  }

li a {
    display:block;
    padding:8px;
    color:purple;
    font-size:20px;
    text-decoration:none;

    }

最佳答案

因为您的导航是 position: fixed;，所以它不会将您的其余内容推到页面下方。任何绝对定位的东西，无论是 absolute、sticky 还是 fixed，都不像普通元素那样是 DOM 的一部分.对于非绝对定位元素，它也可能不存在。你想要做的是像这样在你的内容中添加一个 margin-top:

head{
font-family: 'Roboto', sans-serif;
height:100%vh;

}

nav{
  top:0;
  right:0;
  left:0;
  background-color:#dddd;
  position:fixed;
  padding:10px;
}

ul {
  width:100%vp;
    margin: 0;
    padding: 0;
    }

li {
    list-style-type: none;
    float: right;
    text-align:center;

}

 .greg{
  float:left;
  text-align:center;
  font-size:25px;
  }

li a {
    display:block;
    padding:8px;
    color:purple;
    font-size:20px;
    text-decoration:none;

    }

body{
  margin-top: 80px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="gregslist.css" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
  </head>

  <body>
     <header>
        <nav> 

            <ul>
                <li class="greg">Greg's List</li>
                <li><a href="Post.asp">Post</a></li>
                <li><a href="Account.asp">Account</a> </li>
            </ul>
         </nav>
    </header>
    <div class="search"> 
      <input type="text" placeholder="Search Software Jobs"> </input>
      <label> Search Jobs </label> </div>


  </body>
</html>

关于html - 为什么我的标签和输入出现在我的导航栏中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58718784/

25 4 0
文章推荐： html : trying to place a quote picture aside a text in
文章推荐： c - 关于使用数据类型 int64_t 在 C 中进行十六进制乘法的问题
文章推荐： c - 从 libc 中的函数返回的字符串分配在哪里？
文章推荐： c++ - C 重载与否？