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

Question

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

以下是我的标题：

现在，让我说我的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。

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