回應式下拉選單的寬度在較小的螢屏尺寸下收縮太多-有解無憂

我是一名初級 Web 開發人員，目前正在開發我的第一個回應式網站。我的下拉選單遇到了一個問題，當螢屏尺寸超過某個閾值（484 像素或更小）時，寬度（我想覆寫整個螢屏）開始減小。我在我網站的其他區域也有類似的問題，經過一些研究，我能夠通過添加“中寬：適合內容；”來解決這個問題。到我的 HTML 規則集，但它似乎對下拉串列沒有幫助。知道是什么原因造成的嗎？我一直無法找到原因或解決方案，因此任何建議將不勝感激。

下面是我的代碼的簡化版本：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset="UTF-8">
        <title>A Website</title>
        <link rel="stylesheet" href="./styles/MenuTestCSS.css">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>        
        <header>
            <div class="flexContainer">
                <div id="logoBox">
                    <h2 id="logo">Website</h2>
                </div>
                <nav>   
                    <ul id="menu" class="flexContainer">
                        <li class = "navLink"><a href="" >Link</a></li>
                        <li class = "navLink"><a href="">Link</a></li>
                        <li class = "navLink"><a href="">Link</a></li>
                        <li class = "navLink"><a href="">Link</a></li>
                    </ul> 
                    <div class="flexContainer">
                        <div id="menuToggle">           
                            <div class="square"></div>
                            <div class="square"></div>
                            <div class="square"></div>
                        </div>
                    </div>
                </nav>
            </div>
        </header>
    </body>
</html>

/* GENERAL STYLES */

html {
    box-sizing: border-box;
    min-width: fit-content; 
}

body {
    width: 100%;
}

*, *::before, *::after {

    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

.flexContainer{
    display: flex;
    flex-flow: row wrap;
}

/* HEADER STYLES */

header {
    color: white;
    background-color: #485696;
    height: auto;
}

header .flexContainer {
    align-items: center;
    height: 100%;
    width: 100%;
}

header h2 {
    font-size: 48px;
    margin: 20px 0;
    padding-left: 25px;
}

nav {
    align-self: stretch;
    width: 485px;

}

nav .flexContainer {
    justify-content: space-around;
}

header a, header a:visited {
    color: white;
    text-decoration: none;
    font-size: 26px;
}

header li {
    display: inline-block;
}

#menuToggle {
    width: 45px;
    height: 50px;
    display: none;
}

.square{
    width: 45px;
    background-color: white;
    height: 5px;
}

.square   .square {
    margin-top: 10px;
}

nav {
    flex: 1 0 0;
}

nav .flexContainer {
    justify-content: flex-end;
}


#menuToggle {
    margin-right: 3em;
    width: 30px;
    height: 30px;
    display: block;
}

#menu {
    background-color:#485696;
    position: absolute;
    top: 92px;
    left: 0%;
    height: auto;
    padding: 10px 25px;
    display: block;
    border-top: 4px solid white;
}

.navLink   .navLink {
    margin-top: 1em;
}

#menu li {
    display: block;
}

.navLink   .navLink {
    margin-left: 0px;
}

uj5u.com熱心網友回復：

你有這個問題是因為你設定了nav{ width: 485px } 當 with 低于 485px 時它在邏輯上會被縮小，我注意到你要了解相對長度，如“%”、“rem”、“em”、“vh”.. . 所以在你的情況下，你只需改變nav { width: 485px }bywidth: 100%

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/375061.html

標籤：html css

上一篇：我無法更改輸入的背景顏色

下一篇：定位鏈接z-index一旦它們處于懸停狀態