导航栏HTML和CSS需要帮助

问题描述：

我是HTML和CSS的新手。我正在尝试做一个网站，而且我从导航栏开始，但每当我尝试做我的导航栏缩小时。导航栏HTML和CSS需要帮助

HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Webhosting</title> 
     <link rel="stylesheet" type="text/css" href="cssone.css"/> 
    </head> 
    <body> 
     <div class="body_div"> 
      <!--NAVBAR--> 
      <div class="navbardiv"> 
       <ul class="navbar_ul"> 
        <li class="navbar_li_Contact"><a href="#contact.html">Contact</a></li> 
        <li class="navbar_li_WebHosting"><a class="active" href="#index.html">Webhosting</a></li> 
        <li class="navbar_li_About"><a href="#about.html">About</a></li> 
       </ul> 
      </div> 
     <div> 
    </body> 
</html>

CSS

body{ 
    background-image:url(imgs/background3.jpg); 
    background-repeat: no-repeat; 
    background-attachment:fixed; 
    background-size: cover; 

} 
.navbardiv{ 
    font-family:Rockwell; 
    font-size: 30px; 
} 
.navbar_ul{ 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    overflow:hidden; 
    background-color:#333; 
    border-radius:5px; 
    border-left:2px solid white; 
    border-right:2px solid white; 
    border-top:2px solid white; 
    border-bottom:2px solid white; 
    margin: -8px; 
    width: auto; 
    min-width:416px; 
    height:80px; 
    display: flex; 
    justify-content: space-between; 
    /*position:fixed;*/ 
} 
li { 
    float:left; 
    padding:15px 100px; 
} 
li a{ 
    display:block; 
    color:white; 
    text-align:center; 
    padding:8px 16px; 
    text-decoration: none; 
    border:2px solid white; 
    /*border-bottom:2px solid white;*/ 
    border-radius:5px; 

} 
li a:hover{ 
    background-color:gray; 
}

答

您可以使用width: 100%或left: 0; right: 0;，这取决于你的作品好。

body{ 
 
    background-image:url(imgs/background3.jpg); 
 
    background-repeat: no-repeat; 
 
    background-attachment:fixed; 
 
    background-size: cover; 
 

 
} 
 
.navbardiv{ 
 
    font-family:Rockwell; 
 
    font-size: 30px; 
 
} 
 
.navbar_ul{ 
 
    list-style-type:none; 
 
    margin:0; 
 
    padding:0; 
 
    overflow:hidden; 
 
    background-color:#333; 
 
    border-radius:5px; 
 
    border-left:2px solid white; 
 
    border-right:2px solid white; 
 
    border-top:2px solid white; 
 
    border-bottom:2px solid white; 
 
    margin: -8px; 
 
    left: 0; right: 0; 
 
    min-width:416px; 
 
    height:80px; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    position:fixed; 
 
} 
 
li { 
 
    float:left; 
 
    padding:15px 100px; 
 
} 
 
li a{ 
 
    display:block; 
 
    color:white; 
 
    text-align:center; 
 
    padding:8px 16px; 
 
    text-decoration: none; 
 
    border:2px solid white; 
 
    /*border-bottom:2px solid white;*/ 
 
    border-radius:5px; 
 

 
} 
 
li a:hover{ 
 
    background-color:gray; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Webhosting</title> 
 
     <link rel="stylesheet" type="text/css" href="cssone.css"/> 
 
    </head> 
 
    <body> 
 
     <div class="body_div"> 
 
      <!--NAVBAR--> 
 
      <div class="navbardiv"> 
 
       <ul class="navbar_ul"> 
 
        <li class="navbar_li_Contact"><a href="#contact.html">Contact</a></li> 
 
        <li class="navbar_li_WebHosting"><a class="active" href="#index.html">Webhosting</a></li> 
 
        <li class="navbar_li_About"><a href="#about.html">About</a></li> 
 
       </ul> 
 
      </div> 
 
     <div> 
 
    </body> 
 
</html>

但是你在哪里添加了100％？ –

@SamuelFerreira你会将它添加到问题元素'.navbar_ul'中。我没有使用宽度，虽然我用'左'和'右' –

我做到了，因为你说过，但现在它隐藏了白色边框，我试过放左：1右：1，但后来它收缩得太多 –

答

这个CSS只需添加到您的#navbardiv

.navbardiv{ 
    position: fixed; 
    top: 0; 
}

它应该工作

问题是'position：fixed'“导致导航栏缩小。” OP已经在'.navbar_ul'上注释了'position：fixed'行。他们只需要添加一个宽度或其他东西，这样它就不会缩小，并且仍然会扩展到浏览器的宽度。 –

thx为downvolouting –

下降是为“这个答案是没有用的”，事实并非如此。 OP已经尝试过'position：fixed'，并没有像他们想要的那样工作，并且添加'top：0'什么也不改变，所以它没有用。 –

答

尝试width: 100%;在.navbar_ul在CSS ...这会工作。。;）

导航栏HTML和CSS需要帮助

相关推荐