html - 如何在浏览器大小调整时停止 HTML 列表下降？

Question

好的，所以我在我的网站上创建了一个 header 和一个包含帮助用户导航的列表的 header 。

这是我的标题的样子:

现在，假设我将 Chrome 浏览器窗口变小了。

自然地，HTML 试图使其适合并显示如下:

您可以看到投票链接是如何向下移动的。

我怎样才能阻止这种行为？如果浏览器窗口缩小，投票元素不应该下降，它不会显示，直到浏览器再次足够大。我如何在 CSS 中做到这一点？

当前代码:

/*Header Text*/
#header h1 {
    font-family: "smooth";
    font-size: 45px;
    color: #FFF;
    margin-top: 10px;
    margin-left: 30px;
    height: 0;
}

/* Make unordered list horizontle */
#header ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    margin-top: -12.5px;
    margin-left: 270px;
}

/* Make unordered list horizontle */
#header ul li {
    display: inline;
}

/* Make boxed & colored */
#header ul li a{
    text-decoration: none;
    padding: .2% 3%;
    color: #FFF; /*Text color, when not hovered*/
}

/* Make change colors, when hovered on */
#header ul li a:hover{
    color: lightgray; /*Text color*/
}

/* Header box */
#header{
    height: 60px;
    background-color: #3385ff;
    margin-top: -9px;
    margin-left: -20px;
    padding: 10px;
    width: auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/*Remove line*/
#header a{
    text-decoration: none;
}

/* Header navigation font */
#header li{
    font-family: "smooth";
}

对于 HTML:

<div id="header">
<a href="index.html"><h1>FlareHub</h1></a>
<ul>
  <li><a href="index.html"><i class="fa fa-home"></i>News</a></li>
  <li><a href="vipinfo.html"><i class="fa fa-star"></i>VIP</a></li>
  <li><a href="games.html"><i class="fa fa-trophy"></i>Games</a></li>
  <li><a href="vote.html"><i class="fa fa-heart"></i>Vote</a></li>
</ul>
<div class="dropdown">
  <button class="dropbtn"><i class="fa fa-arrow-down"></i>Account</button>
  <div class="dropdown-content">
    <a href="login.php"><i class="fa fa-key"></i>Login</a>
    <a href="signup.php"><i class="fa fa-pencil-square-o"></i>Signup</a>
    <a href="help.html"><i class="fa fa-life-ring"></i>Help & Support</a>
  </div>
</div>
</div>

Answer 1

如果你想让它离开页面，你可以走以下路线:

#header ul {
white-space: nowrap;
overflow: none; }

如果您希望它能够滚动，请不要使用 overflow: none。

注意:由于高分辨率手机和低分辨率显示器，媒体查询可能会很棘手，但值得研究。