導航欄HTML和CSS需要幫助

-1

我是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; 
}

來源

2017-06-12 Samuel Ferreira

-1

您可以使用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>

來源

2017-06-12 16:21:06

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

@SamuelFerreira你會將它添加到問題元素'.navbar_ul'中。我沒有使用寬度，雖然我用'左'和'右' –

我做到了，因爲你說過，但現在它隱藏了白色邊框，我試過放左：1右：1，但後來它收縮得太多 –

-1

這個CSS只需添加到您的#navbardiv

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

它應該工作

來源

2017-06-12 16:27:20

問題是'position：fixed'「導致導航欄縮小。」 OP已經在'.navbar_ul'上註釋了'position：fixed'行。他們只需要添加一個寬度或其他東西，這樣它就不會縮小，並且仍然會擴展到瀏覽器的寬度。 –

thx爲downvolouting –

下降是爲「這個答案是沒有用的」，事實並非如此。 OP已經嘗試過'position：fixed'，並沒有像他們想要的那樣工作，並且添加'top：0'什麼也不改變，所以它沒有用。 –

嘗試width: 100%;在.navbar_ul在CSS ...這會工作。。;）

來源

2017-06-12 16:36:16

導航欄HTML和CSS需要幫助

回答

相關問題