Question

我的导航栏不会跨越整个页面（运行代码段来查看）。如您所见，左侧和右侧有白色边框。这是代码：

＆＃13;

nav {
  width: 100%;
  height: 100px;
  text-align: center;
  z-index: 30;
  position: relative;
}

li {
  display: inline;
  font-family: "Lato";
  font-size: 20px;
  text-transform: uppercase;
  display: inline-block;
  margin: 20px 10px;
  padding: 20px 25px 25px 25px;
  z-index: 30;
  position: relative;
}

ul {
  background-color: #80DED9;
  margin: 0;
  padding: 0;
  width: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
}

.dropdown {
  display: inline-block;
  cursor: pointer;
  position: relative;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  z-index: 25;
}

.dropdown-content {
  visibility: hidden;
  display: block;
  opacity: 1;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  transform: translateY(-20em);
  z-index: -100;
  transition: all .5s ease-in-out 0s, visibility 0s linear 0.5s, z-index 0s linear 0.01s;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  text-decoration: none;
  font-size: 10px;
  margin: 0px;
  z-index: -250;
}

.dropdown-content li {
  display: block;
  margin: 40px;
  padding: 0px;
  z-index: -250;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #f1f1f1;
}


/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  visibility: visible;
  z-index: -10;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.5s;
}


/* Change the background color of the dropdown button when the dropdown content is shown */

.dropdown:hover {
  color: #6d9dc5;
}

.dropbtn {
  padding: 35.5px 0px;
  margin: -35.5px 40px;
  background-color: #80DED9;
}

＆＃13;

<head>
  <title>JAM Bakery</title>
  <link rel="stylesheet" type="text/css" href="home.css">
  <link href="https://fonts.googleapis.com/css?family=Fjalla+One|Gloria+Hallelujah|Lato" rel="stylesheet">
</head>

<body>
  <nav>
    <ul>
      <div class="dropdown">
        <li class="dropbtn">Products</li>
        <ul class=dropdown-content>
          <li><a href="cupcakes.html">Cupcakes</a></li>
          <li><a href="cakes.html">Cakes</a></li>
          <li><a href="bagles.html">Bagles</a>
            <li>
        </ul>
      </div>
      <li class="buttons"><a href="aboutus.html" class="btn">About Us</a></li>
      <li class="buttons"><a href="contactus.html" class="btn">Contact Us</a></li>
    </ul>
  </nav>
</body>

＆＃13;

与导航栏相关的每件事都在width: 100%上设置。请帮助我理解为什么导航栏不能填充页面的整个宽度。

Answer 1

下面的CSS应该可以防止导航栏周围的白色间距

body {
  margin: 0;
  padding: 0;
}

Answer 2

每个标签都有一些默认的边距和填充，首先你必须使用* {padding：0px;清除边距和填充。 margin：0px} *选择所有元素并设置margin和padding 0.

*{    
   margin: 0px;
   padding:0px;

}
nav {
  width: 100%;
  height: 100px;
  text-align: center;
  z-index: 30;
  position: relative;
}

li {
  display: inline;
  font-family: "Lato";
  font-size: 20px;
  text-transform: uppercase;
  display: inline-block;
  margin: 20px 10px;
  padding: 20px 25px 25px 25px;
  z-index: 30;
  position: relative;
}

ul {
  background-color: #80DED9;
  margin: 0;
  padding: 0;
  width: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
}

.dropdown {
  display: inline-block;
  cursor: pointer;
  position: relative;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  z-index: 25;
}

.dropdown-content {
  visibility: hidden;
  display: block;
  opacity: 1;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  transform: translateY(-20em);
  z-index: -100;
  transition: all .5s ease-in-out 0s, visibility 0s linear 0.5s, z-index 0s linear 0.01s;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  text-decoration: none;
  font-size: 10px;
  margin: 0px;
  z-index: -250;
}

.dropdown-content li {
  display: block;
  margin: 40px;
  padding: 0px;
  z-index: -250;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #f1f1f1;
}


/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  visibility: visible;
  z-index: -10;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.5s;
}


/* Change the background color of the dropdown button when the dropdown content is shown */

.dropdown:hover {
  color: #6d9dc5;
}

.dropbtn {
  padding: 35.5px 0px;
  margin: -35.5px 40px;
  background-color: #80DED9;
}

<head>
  <title>JAM Bakery</title>
  <link rel="stylesheet" type="text/css" href="home.css">
  <link href="https://fonts.googleapis.com/css?family=Fjalla+One|Gloria+Hallelujah|Lato" rel="stylesheet">
</head>

<nav>
  <ul>
    <div class="dropdown">
      <li class="dropbtn">Products</li>
      <ul class=dropdown-content>
        <li><a href="cupcakes.html">Cupcakes</a></li>
        <li><a href="cakes.html">Cakes</a></li>
        <li><a href="bagles.html">Bagles</a>
          <li>
      </ul>
    </div>
    <li class="buttons"><a href="aboutus.html" class="btn">About Us</a></li>
    <li class="buttons"><a href="contactus.html" class="btn">Contact Us</a></li>
  </ul>
</nav>

Answer 3

最好的办法就是设置你的CSS：

body{ margin: 0; padding: 0; width: 100vw;} 
nav{width: 100vw;}

使用100vw会将项目设置为可视宽度的100％。这应该可以消除你的问题。

我的导航没有跨越页面的整个宽度

3 个答案: