Question

我是编程的新手，我试图建立一个网站，但我遇到了一个大问题。我想在我的徽标旁边有一个导航栏，当我滚动时，它会粘在顶部，但是我无法让它工作。文本是彼此重叠的，我不知道如何使它工作。

＆＃13;

<!DOCTYPE html>
<html>
   <head>
      <style>
         body{   background-color: black}
         img.logo{   margin-left: 20px;
         margin-top: 10px;}
         li{ display: inline}
         a{  position: fixed;
         width: auto;
         height: 50px;
         margin-left: 50px;
         margin-top: 60px;
         color: #DFDD7D;
         font-family: 'Open Sans', sans-serif;
         font-size: 20px; 
         font-weight: 300;
         letter-spacing: 0.5px
         margin: 0px;
         padding: px;}
      </style>
   </head>
   <body>
      <header>
         <img class="logo" src="https://lh4.googleusercontent.com/7zZpeNiaANxK7CqDKwE2PdemWJFKoskKGKelsSmQSNmZQOBpKwMkOST3ucML162QIf3k5_ZclpFT_PE=w998-h1006" style="height: auto; width: 300px" >
         <li><a href="Site%20DIA%20main.html">Projecten</a></li>
         <li><a href="">over</a></li>
      </header>
   </body>
</html>

＆＃13;

Answer 1

<li>元素应位于<ul>或<ol>

中

在下面的示例中，我使用了flexboxes进行布局。请查看here以了解有关Flexbox的信息。

body {
  background-color: black
}

header {
  display: flex;
  align-items: center;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}

img.logo {
  margin-left: 20px;
  margin-top: 10px;
}

li {
  margin-left: 1em;
}

a {
  color: #DFDD7D;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.5px margin: 0px;
}

<header>
  <img class="logo" src="http://placehold.it/300x100">
  <ul>
    <li><a href="Site%20DIA%20main.html">Projecten</a></li>
    <li><a href="#">over</a></li>
  </ul>
</header>

Answer 2

欢迎来到网络开发的世界！

第一项业务是修复您的CSS，使其有效。我们也会整理一下。

在letter-spacing: 0.5px
您没有为padding: px;分配任何值，因此请删除该行
它不一定无效，但我会删除margin-left元素上margin-top和a的声明，因为您稍后会使用margin: 0px;覆盖它们。

完成后，CSS应如下所示：

body {
  background-color: black;
}

img.logo {
  margin-left: 20px;
  margin-top: 10px;
}

li {
  display: inline;
}

a {
  position: fixed;
  width: auto;
  height: 50px;
  margin-left: 50px;
  margin-top: 60px;
  color: #DFDD7D;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.5px;
}

现在，让我们使HTML有效并整理它。

您不能直接在<li>下拥有<header>个元素。它们只会进入<ol>或<ul>元素。 <ul>（无序列表）在这里最有意义，所以让我们使用它。
最好在href元素的<a>属性中放置一个值。如果您只是原型设计并且没有要使用的网址，那么人们通常会使用#。

HTML现在看起来像这样：

<header>
  <img class="logo" src="https://lh4.googleusercontent.com/7zZpeNiaANxK7CqDKwE2PdemWJFKoskKGKelsSmQSNmZQOBpKwMkOST3ucML162QIf3k5_ZclpFT_PE=w998-h1006" style="height: auto; width: 300px" >

  <ul>
    <li><a href="Site%20DIA%20main.html">Projecten</a></li>
    <li><a href="#">over</a></li>
  </ul>
</header>

现在，一个问题是您是分别为每个<a>元素应用固定位置。您实际想要做的是将固定位置应用于整个导航栏（整个<ul>）。所以改变你的CSS：

ul {
    position: fixed;
}

a {
  width: auto;
  height: 50px;
  margin-left: 50px;
  margin-top: 60px;
  color: #DFDD7D;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.5px;
}

这只是一段摘录。但请注意，我已将position: fixed;从a移至ul。真的，这就是所需要的。如果您想微调导航栏的显示位置，请继续使用top和left，如下所示：

ul {
  position: fixed;
  top: 5px;
  left: 10px;
}

整个页面现在看起来像这样：

body {
  background-color: black;
  color: white;
}

img.logo {
  margin-left: 20px;
  margin-top: 10px;
}

li {
  display: inline;
}

ul {
  position: fixed;
  top: 5px;
  left: 10px;
}

a {
  width: auto;
  height: 50px;
  margin-left: 50px;
  margin-top: 60px;
  color: #DFDD7D;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.5px;
}

<header>
  <img class="logo" src="https://lh4.googleusercontent.com/7zZpeNiaANxK7CqDKwE2PdemWJFKoskKGKelsSmQSNmZQOBpKwMkOST3ucML162QIf3k5_ZclpFT_PE=w998-h1006" style="height: auto; width: 300px" >

  <ul>
    <li><a href="Site%20DIA%20main.html">Projecten</a></li>
    <li><a href="">over</a></li>
  </ul>
</header>

Answer 3

将位置更改为相对位置并添加＆＃34; vertical-align：top＆＃34;到锚。

＆＃13;

 body{   background-color: black}

    img.logo{   margin-left: 20px;
                margin-top: 10px;}

    li{ display: inline}

    a{  position: relative;
        width: auto;
        height: 50px;
        margin-left: 50px;
        margin-top: 60px;
        color: #DFDD7D;
        font-family: 'Open Sans', sans-serif;
        font-size: 20px; 
        font-weight: 300;
        letter-spacing: 0.5px;
        vertical-align:top;
        margin: 0px;
        padding: px;}

＆＃13;

<img class="logo" src="http://lorempixel.com/300/100" style="height: auto; width: 300px" >

<li><a href="Site%20DIA%20main.html">Projecten</a></li>
<li><a href="">over</a></li>

＆＃13;

Answer 4

将你的李放入ul，显示li inline-block，然后将徽标和ul向左浮动，或者向右浮动ul并在其上放一个边距，如果你喜欢的话。固定标题，滚动时徽标和导航栏保持在顶部。

＆＃13;

<style>
      body{   background-color: black}

      header#header {
        position: fixed;
        width: 100%;
      }

      div.logo {
        margin-left: 20px;
        margin-top: 10px;
        float: left;
      }

      ul#nav {
        float: left;
      }

      ul#nav li {
        display: inline-block;
      }

      ul#nav li a {
        margin-left: 50px;
        margin-top: 60px;
        color: #DFDD7D;
        font-family: 'Open Sans', sans-serif;
        font-size: 20px;
        font-weight: 300;
        letter-spacing: 0.5px;
      }

  </style>

    <header id="header">
    <div class="logo">
      <img class="logo" src="https://lh4.googleusercontent.com/7zZpeNiaANxK7CqDKwE2PdemWJFKoskKGKelsSmQSNmZQOBpKwMkOST3ucML162QIf3k5_ZclpFT_PE=w998-h1006" style="height: auto; width: 300px" >
    </div>
    <nav id="main_nav">
      <ul id="nav">
        <li><a href="Site%20DIA%20main.html">Projecten</a></li>
        <li><a href="">over</a></li>
      </ul>
    </nav>
  </header>

＆＃13;

Answer 5

我认为水平链接的<li>标签有点复杂。您只需使用<a>代码而不使用<li>。这是我认为最好的例子。

Codepen demo

如果您希望内容可以在导航栏顶部滚动（不修复），则需要将其包装到<div>中。如果您最终想要一个简单的页脚，这也会产生非常好的效果。

由于您没有指定任何浏览器支持，我冒昧使用flex这样做。

徽标旁边的HTML和CSS导航栏

5 个答案: