當瀏覽器最小化時，浮動li元素的格式不會擴展

我已經使用無序列表創建了一個導航欄。我還創建了一個包含我的標誌和導航條鏈接的包裝器。我想包裝的最小寬度爲960px。當瀏覽器窗口完全展開時，看起來很好。當瀏覽器最小化時，浮動li元素的格式不會擴展

完全展開的窗口

當我最小化窗口爲比包裝窄，並在回滾動到導航欄的端部，上導航欄的格式（這僅僅是一個背景顏色）丟失。標題發生類似的事情。

最小化窗口

我怎樣才能獲得頭pawprint圖像和UL的橙色背景顏色延伸到窗口的右側，同時仍保持我的包裝在一個最小寬度960像素？

我試過「overflow-x：auto」在我的#nav id和標題上，它擴展了格式，但顯然創建了滾動條和其他不需要的怪癖。

我收集我的問題與李元素漂浮，並嘗試一個clearfix，但我做錯了或它沒有工作。

理想情況下，我正在尋找一種僅使用HTML和CSS的解決方案。即便如此，我也認爲flexbox可能是一個解決方案，但我希望避免不得不進入flexbox。但如果必須，我會的。

我的代碼如下。任何幫助表示讚賞！

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
} 
 

 
.wrapper { 
 
    width: 960px; 
 
    margin: 0 auto; 
 
} 
 

 
#logo { 
 
    width: 160px; 
 
    height: 160px; 
 
    border-radius: 50%; 
 
    background-color: white; 
 
    border-color: black; 
 
    border-style: dotted; 
 
    border-width: 1px; 
 
} 
 

 
#nav { 
 
    list-style-type: none; 
 
    margin: -2.25em 0; 
 
    background-color: rgba(240, 100, 60, 1); 
 
    height: 2em; 
 
    cursor: default; 
 
} 
 

 
#nav li { 
 
    float: right; 
 
    font-size: 1.25em; 
 
    width: 8em; 
 
    text-align: center; 
 
} 
 

 
header { 
 
    background-image: url('../images/Asset%202.png'); 
 
    background-repeat: repeat-x; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link href="styles/stack-overflow-style.css" type="text/css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <div class="wrapper"> 
 
     <img id="logo" src="https://i.pinimg.com/originals/4e/de/bc/4edebc3259e32539dd6d6d29d5d8474a.jpg" alt="Good Boy Dog Care Logo"> 
 
    </div> 
 
    <ul id="nav"> 
 
     <div class="wrapper"> 
 
     <li>Contact</li> 
 
     <li>Services</li> 
 
     </div> 
 
    </ul> 
 
    </header> 
 
</body> 
 

 
</html>

來源

2017-09-25 cliffgallagher

，你可以做的唯一的事情就是設置爲mimimized瀏覽器的寬度定製造型，看看代碼：

@media screen and (min-width: 1700px) and (max-width: 1998px) { 
    //your modified styling for the minimized window size goes here 
}

，你可以得到通過使用以下javascript函數最小化窗口的寬度：

alert($(window).width());

來源

2017-09-26 06:05:34

當瀏覽器最小化時，浮動li元素的格式不會擴展

回答

相關問題