Question

我有一个CSS导航栏，但每当我尝试调整浏览器窗口的大小时，导航栏就会创建一个新行，而不是在屏幕外继续。我已经尝试添加min-width，它适用于我网站上的其他div，但它没有做任何事情

jsfiddle：https://jsfiddle.net/oddrmg9w/ 左侧的白色空间是有意的，这就是徽标的位置。

Answer 1

这里的问题是，您在fixed定位元素中有一个absolute个定位元素。

在最常见的情况下，您的主导航将设置为fixed的位置，以便将其从文档流中取出，将其粘贴到屏幕上的永久位置，该位置保持在屏幕上方所有的内容。

在这种情况下，问题是您必须删除.navbar ul fixed的{{1}}位置并将其应用到.navbar容器中，如下所示：

.navbar {
  min-width: 720px;
  max-width: 100%;
  position: fixed;
  left: 0;
  right: 0;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #ff2d2d;
  z-index: 1;
  top: 0px;
  left: 240px;
  right: 0px;
}

.navbar li {
  float: left;
}

.navbar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
}

.navbar li a:hover {
  background-color: orange;
}

.active {
  background-color: yellow;
}

left和right值表示元素粘贴在浏览器窗口的左右墙上，无论如何。您还可以添加top: 0属性，将容器粘贴到窗口顶部。

以下是 fiddle ，我认为您希望实现这一目标。

你应该了解你的html和css基础知识。所以我建议你进一步阅读Mozilla Developer Network's site.

中的定位

Answer 2

如果您想让div保持宽度并让它退出可见屏幕，只需将position: fixed及其所有设置从ul移至navbar即可：

.navbar {
    min-width: 720px;
    max-width: 100%;
    position: fixed;
    z-index: 1;
    top: 0px;
    left: 240px;
    right: 0px;
}

.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ff2d2d;
}

＆＃13;

.navbar {
  min-width: 720px;
  max-width: 100%;
  position: fixed;
  z-index: 1;
  top: 0px;
  left: 240px;
  right: 0px;
}
.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #ff2d2d;
}
.navbar li {
  float: left;
}
.navbar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
}
.navbar li a:hover {
  background-color: orange;
}
.active {
  background-color: yellow;
}

＆＃13;

<div class="navbar">
  <ul>
    <li style="float: right;"> <a href="About.html">About </a>
    </li>
    <li> <a href="Dtier.php">D-tier</a>
    </li>
    <li> <a href="Ctier.php">C-tier</a>
    </li>
    <li> <a href="Btier.php">B-tier</a>
    </li>
    <li> <a href="Atier.php">A-tier</a>
    </li>
    <li> <a class="active" href="Stier.php">S-tier</a>
    </li>
    <li> <a href="vote.php">Vote</a>
    </li>
  </ul>
</div>

＆＃13;

调整浏览器窗口大小时，CSS导航栏会不断移动

2 个答案: