1. 首頁
  2. 問答
  3. 我的導航沒有跨越整個頁面的寬度

我的導航沒有跨越整個頁面的寬度

2017-05-20 117 views
0

我的導航欄沒有跨越整個頁面（運行代碼片段查看）。正如你所看到的，左側和右側有白色邊框。下面是代碼：我的導航沒有跨越整個頁面的寬度

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> 
 

 
<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>

，涉及到的導航欄每一件事情上width: 100%設置。請幫助我理解爲什麼導航欄未填充頁面的整個寬度。

來源

2017-05-20 Matan Berkovsky

+0

看來你沒有'body'標籤。但是你必須有' ...'。 –

+2

'body'有一個默認邊距。添加'body {margin：0; }' –

+0

@MichaelCoker非常感謝。這幫了很多。 –

回答

2

的CSS下面應該避免在你的導航欄間距白

body { 
    margin: 0; 
    padding: 0; 
}

來源

2017-05-20 21:42:24 Osman

0

每個標籤都有一些默認的邊距和填充首先，您必須使用* {padding：0px;}來清除邊距和填充。保證金：0像素}是*選擇所有的元素，並設置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>

來源

2017-05-20 21:34:09 mdashikar

0

的最好的辦法是像這樣設置你的CSS：

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

使用100vw將把項目設置爲可視寬度的100％。這應該可以消除你的問題。

來源

2017-05-20 22:15:45 Mattn1014

相關問題

 相關問題