Question

我正在freeCodeCamp上做一个关于产品放置页面的项目。该页面现在要求我在视口顶部修复#navbar。尽管此方法适用于position: fixed，但在CSS中添加固定位置后，导航栏不再保留在中心并向左移动。如果删除position: fixed;，您将会明白我的意思。为什么会这样？

在添加固定位置之前，导航栏通过margin-left: center;，margin-right: center;居中（英国拼写；-}）。我的视口也为800像素宽，并具有自动高度（即BBC样式）。

重要说明：我创建了一个徽标，随后将其添加到文档中，但是该徽标似乎未显示（由tinypic托管）。如果看不到此徽标，则该徽标位于标题和视频之间。

其他信息：在进行更改之前，我的视频已居中。如果您还可以帮助我，我将不胜感激。但这不是这个问题的重点。

#mainbody {
  width: 800px;
  height: auto;
  margin-right: auto;
  margin-left: auto;
  font-family: garamond, serif;
}

#h1title {
  text-align: center;
  text-shadow: 16px 8px 16px;
  font-size: 38px;
  padding-top: 10px;
}

#header-img {
  display: block;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

  #nav-bar {
  text-align: center;
  position: fixed;
  right: 0;
  left: 0;
}

.nav-link {
  text-decoration: none;
  color: black;
  font-weight: 900;
}

.nav-link:hover {
  color: black;
}

.nav-button {
  -webkit-border-radius: 50%;
  background-color: orange;
  height: auto;
  width: 100px;
  transition: opacity 1s linear;
}

.nav-button:hover {
  background-color: white;
  opacity: 0.30;
}

#video {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

#form {
  
}

legend {
  font-weight: 700;
}

#submit {
  margin-top: 5px;
}

<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8">
    <title>Quality Prints</title>
  </head>
  <body id="mainbody">
    <a name="home-link"></a>
    <header id="header">
      <nav id="nav-bar">
        <button class="nav-button"><a class="nav-link" href="#home-link">Home</a></button>
        <button class="nav-button"><a class="nav-link" href="#">Products</a></button>
        <button class="nav-button"><a class="nav-link" href="#contact-link">Contact</a></button>
      </nav>
      <h1 id="h1title">Quality Prints ™</h1><hr />
      <img id="header-img" src="http://i66.tinypic.com/157ltle.jpg">
      
    </header>
    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/CqtLKw7cJaY?rel=0&amp;showinfo=0&amp;start=5" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><br />       
    <form action="https://www.freecodecamp.com/email-submit" id="form">
      <a name="contact-link"></a>
      <fieldset>
        <legend>Information Pack by Email</legend>
        <label for="emailme">Email Address:</label><br />
        <input name="emailme" type="email" id="emailmeinput" placeholder="Your email address"><br />
        <input type="submit" value="Send" id="submit" formaction="https://www.freecodecamp.com/email-submit">
      </fieldset>
    </form>
  </body>
</html>

我已经进行了修改以更正语法。正如安德里（Andriy）所说，在'.nav-button：hover'之后有一个缺失的'}'。我还添加了“ left：0;”和“正确：0；”到“＃nav-bar”。

Answer 1

尝试添加零值左右规则：

#nav-bar {
  text-align: center;
  position: fixed;
  right: 0;
  left: 0;
}

#mainbody {
  width: 800px;
  height: auto;
  margin-right: auto;
  margin-left: auto;
  font-family: garamond, serif;
}

#h1title {
  text-align: center;
  text-shadow: 16px 8px 16px;
  font-size: 38px;
  padding-top: 10px;
}

#header-img {
  display: block;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

  #nav-bar {
  text-align: center;
  position: fixed;
  right: 0;
  left: 0;
}

.nav-link {
  text-decoration: none;
  color: black;
  font-weight: 900;
}

.nav-link:hover {
  color: black;
}

.nav-button {
  -webkit-border-radius: 50%;
  background-color: orange;
  height: auto;
  width: 100px;
  transition: opacity 1s linear;
}

.nav-button:hover {
  background-color: white;
  opacity: 0.30;
}

#video {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

#form {
  
}

legend {
  font-weight: 700;
}

#submit {
  margin-top: 5px;
}

<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8">
    <title>Quality Prints</title>
  </head>
  <body id="mainbody">
    <a name="home-link"></a>
    <header id="header">
      <nav id="nav-bar">
        <button class="nav-button"><a class="nav-link" href="#home-link">Home</a></button>
        <button class="nav-button"><a class="nav-link" href="#">Products</a></button>
        <button class="nav-button"><a class="nav-link" href="#contact-link">Contact</a></button>
      </nav>
      <h1 id="h1title">Quality Prints ™</h1><hr />
      <img id="header-img" src="http://i66.tinypic.com/157ltle.jpg">
      
    </header>
    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/CqtLKw7cJaY?rel=0&amp;showinfo=0&amp;start=5" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><br />       
    <form action="https://www.freecodecamp.com/email-submit" id="form">
      <a name="contact-link"></a>
      <fieldset>
        <legend>Information Pack by Email</legend>
        <label for="emailme">Email Address:</label><br />
        <input name="emailme" type="email" id="emailmeinput" placeholder="Your email address"><br />
        <input type="submit" value="Send" id="submit" formaction="https://www.freecodecamp.com/email-submit">
      </fieldset>
    </form>
  </body>
</html>

Answer 2

您的身体宽度设置为800px；这有点奇怪。

因此您的.navbar宽度是由该宽度继承的。这使它看起来没有居中，因为窗口不是800px;

Answer 3

只需将width: 100%;添加到#nav-bar-默认情况下，固定元素没有全角，您必须对其进行定义。（然后按钮将在这100％的中心）：

（注意：left: 0; right: 0会带来相同的结果，因为这样定义了左端和右端，所以宽度也为100％）

  #mainbody {
  width: 800px;
  height: auto;
  margin-right: auto;
  margin-left: auto;
  font-family: garamond, serif;
}

#h1title {
  text-align: center;
  text-shadow: 16px 8px 16px;
  font-size: 38px;
  padding-top: 10px;
}

#header-img {
  display: block;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

#nav-bar {
  text-align: center;
  position: fixed;
  width: 100%;
}

.nav-link {
  text-decoration: none;
  color: black;
  font-weight: 900;
}

.nav-link:hover {
  color: black;
}

.nav-button {
  -webkit-border-radius: 50%;
  background-color: orange;
  height: auto;
  width: 100px;
  transition: opacity 1s linear;
}

.nav-button:hover {
  background-color: white;
  opacity: 0.30;
  #video {
    display: block;
    margin-right: auto;
    margin-left: auto;
  }
  #form {}
  legend {
    font-weight: 700;
  }
  #submit {
    margin-top: 5px;
  }

<!DOCTYPE html>
<html lang="en-GB">

<head>
  <meta charset="utf-8">
  <title>Quality Prints</title>
</head>

<body id="mainbody">
  <a name="home-link"></a>
  <header id="header">
    <nav id="nav-bar">
      <button class="nav-button"><a class="nav-link" href="#home-link">Home</a></button>
      <button class="nav-button"><a class="nav-link" href="#">Products</a></button>
      <button class="nav-button"><a class="nav-link" href="#contact-link">Contact</a></button>
    </nav>
    <h1 id="h1title">Quality Prints ™</h1>
    <hr />
    <img id="header-img" src="http://i66.tinypic.com/157ltle.jpg">

  </header>
  <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/CqtLKw7cJaY?rel=0&amp;showinfo=0&amp;start=5" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><br />
  <form action="https://www.freecodecamp.com/email-submit" id="form">
    <a name="contact-link"></a>
    <fieldset>
      <legend>Information Pack by Email</legend>
      <label for="emailme">Email Address:</label><br />
      <input name="emailme" type="email" id="emailmeinput" placeholder="Your email address"><br />
      <input type="submit" value="Send" id="submit" formaction="https://www.freecodecamp.com/email-submit">
    </fieldset>
  </form>
</body>

</html>

为什么我的“位置：固定”导航栏不会保留在文档的中心？

3 个答案: