我的导航栏在桌面模式下工作得很好。但是当我降低屏幕分辨率时,它开始不覆盖窗口的整个宽度。你能帮我使它覆盖屏幕的整个宽度吗?
我的主页. html文件
var ser = document.getElementById('in');
document.getElementById('in').onkeypress = function(e) {
if (e.keyCode == 13) {
console.log("ent")
var value = document.getElementById('in').value;
var search = "example";
console.log(value)
window.open("result.html", "_self");
sessionStorage.setItem("search", value);
}
}
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
const item = document.querySelector(".item");
hamburger.addEventListener("click", mobileMenu);
function mobileMenu() {
//hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
}
const navLink = document.querySelectorAll(".nav-link");
navLink.forEach(n => n.addEventListener("click", closeMenu));
function closeMenu() {
hamburger.classList.remove("active");
navMenu.classList.remove("active");
}
var width = screen.width;
var height = screen.height;
var tempo = document.getElementById("tempo");
var ser = document.getElementById("ser");
if (width < 650) {
tempo.remove();
ser.remove();
navMenu.setAttribute('width', '100%')
}
* {
margin: 0px;
background-color: white;
}
.navbar {
background-color: blue;
width: 100%;
height: 50px;
}
.navbar-container {
display: flex;
align-items: center;
background-color: black;
height: 100%;
}
.item {
padding: 0 20px;
background-color: black;
color: white;
text-decoration: solid;
}
.search_box_item {
padding: 0 0 0 400px;
width: 500px;
}
.p1 {
float: right;
}
.pm {
font-family: 'Courier New', Courier, monospace;
color: aquamarine;
font-size: 5vw;
background-color: transparent;
width: 3vw;
margin: 10px 10px;
}
.flex-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%
}
.nav-items {
list-style-type: none;
}
#in {
border-radius: 25px;
}
.hamburger {
display: none;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #101010;
}
@media only screen and (max-width: 767px) {
.navbar {
height: 20vw;
width: 100%;
}
.logo {
height: 1vw;
width: 1vw
}
.navbar-container {
align-items: center;
background-color: black;
height: 100%;
}
}
@media only screen and (max-width: 480px) and (min-width: 320px) {
.navbar {
height: 30vw;
}
.navbar {
height: 20vw;
width: 100%;
}
.logo {
height: 10vw
}
.navbar-container {
align-items: center;
background-color: black;
height: 100%;
}
}
@media only screen and (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 5rem;
flex-direction: column;
background-color: #fff;
width: 100%;
border-radius: 10px;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
}
.nav-menu.active {
left: 0;
}
.nav-item {
margin: 2.5rem 0;
}
.hamburger {
display: block;
cursor: pointer;
}
.navbar-container {
align-items: center;
background-color: black;
height: 100%;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
width: 100%;
}
.temp {
visibility: collapse;
}
.navbar {
height: 20vw;
width: 100%;
}
}
.nav-menu {
background-color: black;
width: 100%;
height: 40%;
margin-top: 0px;
}
<script src="https://kit.fontawesome.com/67c66657c7.js"></script>
<div class="navbar flex-row" style="width: 100%;">
<nav class="navbar-container navbar" style="width: 100%;">
<div class="navbar-logo item"><img class="logo" src="images/Navlab.png" style="width:3vw"></div>
<div class="search_box_item item temp" id="ser">
<input id="in" type="search" placeholder=" Search here" style="width:100%; background-color: white; align-self: center;">
<!--<button id="search" style="background: url(images/search1.png); height: 40px; width: 40px; border: none;"></button>-->
</div>
<div class="nav-items flex-row" id="tempo">
<li class="ptopics item temp">New releases</li>
<li class="profile item temp"><a href="profile.html">My profile</a></li>
<li class="about item temp">About us</li>
</div>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="nav-menu">
</div>
</nav>
</div>
<div class="firstp" style="max-width: 100vw; height: 100vw;">
<img style="float:left; max-width:50%vw; height:auto; margin: 10vw 10vw;" src="images/i1.png">
<p1 class="pm" style="margin-top: 10vw; padding-top: 5vw; float:left">Read <br> Write <br> Learn</p1>
</div>
我尝试使导航栏,导航栏容器和导航菜单的宽度100%,但它仍然不工作。
1条答案
按热度按时间xytpbqjk1#
类
search_box_item
有一个padding: 0px 0px 0px 400px;
,它导致<nav>
中的第二个<div>
把事情搞砸了。使用Inspect Elements/Developer Tools逐个检查元素很有帮助。