Question

我正在创建网站，我遇到了一个小问题。最后我设置min-width: 1200px。当我将我的互联网浏览器更改为较小的分辨率并水平滚动时，它不会影响我的菜单项！我该如何解决？

#page{
     width: 1200px; height:1000px;
}
#page #primaryMenu {
  min-width: 1200px;
  background-color: #151414;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
  font-size: 14px;
  width: 100%;
  position: fixed;
  z-index: 10;
  box-shadow: 0 0 5px black;
}

#page #primaryMenu li {
  display: inline-block;
  margin: 20px 10px;
  cursor: pointer;
}

#page #primaryMenu li a {
  text-decoration: none;
  color: white;
  transition: 0.65s;
}
        
#page #primaryMenu li a:hover {
  transition: 0.5s;
  color: #d10239;
 }

<div id="page">
  <ul id="primaryMenu">
    <li><a href="index.html">STRONA GŁÓWNA</a></li>
    <li><a href="fryzjerstwo.html">FRYZJERSTWO</a></li>
    <li><a href="kosmetyka.html">KOSMETYKA</a></li>
    <li><a href="solarium.html">SOLARIUM</a></li>
    <li><a href="galeria.html">GALERIA</a></li>
    <li><a href="kontakt.html">KONTAKT</a></li>
  </ul>
</div>

修改

我不想让我的网站响应，我想将min-width 1200px;设置为所有设备。它的菜单贴在顶部，我不想跟随垂直滚动。例如：当我将网页浏览器分辨率更改为200x200并尝试向右滚动时，我的菜单（列表项）保持在相同的位置。

Answer 1

position: fixed;上的

#page #primaryMenu：您要求浏览器在屏幕左上角的给定x，y偏移处显示主菜单，是否滚动。

检查the documentation关于css位置。

已修复：

不要为元素留出空间。相反，将其放置在相对于屏幕视口的指定位置，滚动时不要移动它。

如果我理解正确，您需要在垂直滚动条上设置fixed位置，以便菜单将sticky显示在视口的顶部，并normal定位在水平滚动，以便通过滚动查看菜单。

我认为只能使用css解决方案，但请查看这些问题：

Answer 2

问题在于，当您以min-width为单位时，它实际上占用宽度的1200px。

如果您正在尝试实现响应式设计，请使用百分比。

示例：对于#page #primarymenu，使用宽度为100％或您想要的值（以百分比表示）。然后它将适用于所有尺寸的屏幕

width:100%;

或

min-width:90%

Answer 3

删除min-width: 1200px;，它会正常工作

Answer 4

JS中的GOT解决方案：jsfiddle.net/vy8rbsv6/1

固定元素忽略水平滚动

4 个答案: