Question

我使用无序列表创建了一个导航栏。我还创建了一个包含我的徽标和导航栏链接的包装器。我希望包装器的最小宽度为960px。当浏览器窗口完全展开时，它看起来很好。

完全展开的窗口

当我将窗口最小化为比包装器更窄，并向后滚动到导航栏的末尾时，导航栏上的格式（这只是背景颜色）将丢失。标题会发生类似的情况。

最小化窗口

如何让ul上的标题pawprint图像和橙色背景颜色延伸到窗口的右侧，同时仍然保持我的包装器的最小宽度为960px？

我在#nav id和标题上尝试了“overflow-x：auto”，这扩展了格式，但显然创建了滚动条和其他不需要的怪癖。

我收集我的问题与li元素被浮动有关，并尝试了一个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>

Answer 1

您唯一能做的就是为最小化的浏览器宽度设置自定义样式，看一下代码：

@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元素的格式不会扩展

1 个答案: