Question

我是编码的新手，我正在建立一个网站。但我有一个问题，它不能让它居中。我不想要它的宽度，但有点像盒子一样偏离侧面。就像你可以看到的那样，右边比左边有更多的边距，这怎么可能？它是一个bug还是我需要添加的东西，以便它可以工作？希望你能帮助我！这是代码：

<!DOCTYPE html>
<html>

<head>
  <style>

    body {
      background-color: rgb(57, 57, 57);
    }

    header {
      background-color: white;
    }

    header::after {
      content: " ";
      display: table;
      clear: both;
    }

    .container {
      width: 95%;
      margin: 0 auto;
    }

    .logo {
      float: left;
      width: 250px;
      height: auto;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    nav {
      float: right;

      font-family: 'courier';
      font-size: 18px;
      font-weight: 300;
      letter-spacing: 0.5px;
    }

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

    nav ul li {
      display: inline-block;
      margin-left: 45px;
    }

    nav ul li a {
      display: block;
      color: black;
      text-decoration: none;
      padding: 17px 15px;
      position: relative;
    }

    nav ul li a:before {
      content: '';
      position: absolute;
      width: 100%;
      height: 3px;
      bottom: 0;
      left: 0;
      background-color: #000;
      visibility: hidden;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
    }

    nav ul li a:hover:before {
      visibility: visible;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }

  </style>
</head>

<body>
  <header>
    <div class="container">

      <img class="logo" src="#">

      <nav>
        <ul>
          <li><a href="#">PROJECTEN</a></li>
          <li><a href="#">OVER</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </nav>

    </div>
  </header>

</body>

</html>

Answer 1

通常以我们使用margin: 0 auto为中心。尝试将其添加到nav样式中。

要将导航项目拉到右侧，我会尝试使用flexbox（a great thing to learn if you're new to HTML/CSS）。

这是最终的CSS：

nav {
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: row-reverse;

  font-family: 'courier';
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.5px;
}

Answer 2

您应用于.container的CSS应移至header

＆＃13;

body {
  background-color: rgb(57, 57, 57);
}

header {
  background-color: white;
  width: 95%;
  margin: 0 auto;
}

header::after {
  content: " ";
  display: table;
  clear: both;
}

.container {
}

.logo {
  float: left;
  width: 250px;
  height: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

nav {
  float: right;
  font-family: 'courier';
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.5px;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

nav ul li {
  display: inline-block;
  margin-left: 45px;
}

nav ul li a {
  display: block;
  color: black;
  text-decoration: none;
  padding: 17px 15px;
  position: relative;
}

nav ul li a:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

nav ul li a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

＆＃13;

<header>
  <div class="container">

    <img class="logo" src="#">

    <nav>
      <ul>
        <li><a href="#">PROJECTEN</a></li>
        <li><a href="#">OVER</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </nav>

  </div>
</header>

＆＃13;

Answer 3

将您.container设置为position: relative;，或者您愿意：

.container {
    width: 95%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 auto;}

HTML导航栏不居中，右侧有更多边距

3 个答案: