需要幫助在html和css上構建導航欄

我是HTML和CSS的新手。我想做一個網站，我從導航欄開始，但是這個導航欄對於每個屏幕邊都不是「可縮放的」，當它在全屏幕上很好時，但是當我最小化它時它不會加載該部分在右邊這是「關於」。所有的菜單都指向同一頁面，而現在這就是目標。下面的代碼：需要幫助在html和css上構建導航欄

body {} 
 

 
.navbardiv {} 
 

 
.navbar_ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    /*overflow:hidden;*/ 
 
    background-color: #333; 
 
    border: 5px solid gray; 
 
    margin: -8px; 
 
    width: auto; 
 
    min-width: 600px; 
 
    height: 70px; 
 
} 
 

 
li { 
 
    float: left; 
 
    padding: 10px 150px; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
}

<!--NAVBAR--> 
 
<div class="navbardiv"> 
 
    <ul class="navbar_ul"> 
 
    <li class="navbar_li_Contact"><a href="index.html">Contact</a></li> 
 
    <li class="navbar_li_WebHosting"><a href="index.html">Webhosting</a></li> 
 
    <li class="navbar_li_About"><a href="index.html">About</a></li> 
 
    </ul> 
 
</div>

來源

2017-06-12 Samuel Ferreira

您將最小寬度設置爲600px，因此當您最小化屏幕使其小於600像素時，可能會切斷部分導航欄。嘗試設置寬度爲100％或類似的東西，看看是否有效。 – josephmbustamante

在列表項目周圍還有大量的填充項，這些填充項可能會在小屏幕上查看時將它們推送到新行。 –

您要爲李填充設置150px這是非常高的，你需要減少。

但是如果你想要的鏈接，採取全寬度和被evenlly間隔，那麼你可以使用柔性盒和justify-content: space-between;

看到的代碼片段：

body {} 
 

 
.navbardiv {} 
 

 
.navbar_ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    /*overflow:hidden;*/ 
 
    background-color: #333; 
 
    border: 5px solid gray; 
 
    margin: -8px; 
 
    width: auto; 
 
    min-width: 600px; 
 
    height: 70px; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
li { 
 
    float: left; 
 
    padding: 10px 20px; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
}

<!--NAVBAR--> 
 
<div class="navbardiv"> 
 
    <ul class="navbar_ul"> 
 
    <li class="navbar_li_Contact"><a href="index.html">Contact</a></li> 
 
    <li class="navbar_li_WebHosting"><a href="index.html">Webhosting</a></li> 
 
    <li class="navbar_li_About"><a href="index.html">About</a></li> 
 
    </ul> 
 
</div>

來源

2017-06-12 13:05:17 Chiller

也可能將'min-width'設置爲小於600px的水平，因爲這會在較小的屏幕上產生問題。 – Tijmen

但是，如果我這樣做，當我更改爲全尺寸時，「關於」不會位於左上角，「WebHosting」將不會位於中心位置，而另一位位於左上角 –

@Tijmen我縮小爲316px –

由於min-width: 600px;部分，您的導航欄無法響應。這個將會做的是，當屏幕分辨率低於600px的寬度時，它會讓你的導航欄保持在600像素。因此它會將其對齊到屏幕的最左邊部分，這會讓您看到裁剪的右邊緣。 min-width:100%;不會工作，因爲它將開始裁剪時，導航欄的內部元素將不適合。

很容易解決這個問題。只需將其更改爲width:100%;即可。

來源

2017-06-12 13:24:30 necilAlbayrak

需要幫助在html和css上構建導航欄

回答

相關問題