当浏览器最小化时，浮动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>

答

，你可以做的唯一的事情就是设置为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());

当浏览器最小化时，浮动li元素的格式不会扩展

相关推荐