调整窗口大小时如何保持导航栏不移动答案

【问题标题】：How to Keep Nav bar from shifting when window resized调整窗口大小时如何保持导航栏不移动
【发布时间】：2019-06-19 21:08:53
【问题描述】：

我是 html/css 的新手。我的问题是当我重新调整浏览器窗口的大小时，导航栏的文本会根据窗口的大小移动/压缩并变得扭曲。我希望它保持静止，这样当我缩小浏览器窗口时，我必须向右滚动才能再次看到文本。我也在使用引导程序。

这是我的代码：

HTML

<body>
  <div class="nav">
    <div class="container">
      <ul class="pull-right">
        <li><a href="#">HOME</a></li>
        <li><a href="#">WINES</a></li>
        <li><a href="#">GRAPES</a></li>
        <li><a href="#">ABOUT US</a></li>
      </ul>
    </div>
  </div>
</body>

CSS

.nav li {
  display: inline;
}

.nav a {
  color: #5a5a5a;
  font-size: 20px;
  font-weight: bold;
  padding: 14px 10px;
}

.nav {
  position: absolute;
  top: 20px;
  right: 0px;
}

我尝试使用.container {width: 900px;}，但这没有帮助。导航栏仍然不会保持静止。

【问题讨论】：

标签： css resize nav autoresize

【解决方案1】：

您可以通过向导航栏添加最小宽度来解决此问题。

 navigation {        
    margin-right: auto;    
    margin-left: auto;    
    max-width: 100%;    
    min-width: 1000px;
}

【讨论】：

你能扩展一下这个答案吗？ stackoverflow.com/help/how-to-answer

【解决方案2】：

您可以通过为导航栏周围的 div 添加最小宽度来解决此问题。

在您的情况下，它将在 .nav 类中

.nav {
   min-width:165px;
   position: absolute;
   top: 20px;
   right: 0px;
}

我不知道您是否与我们共享了所有代码，但从您提供的代码来看，165 像素的最小宽度应该没问题。如果存在更多使导航栏宽度不同的代码，那么您可能需要调整min-width: 的像素量。

【讨论】：

【解决方案3】：

这应该可以工作

ul {
  white-space: nowrap;
}

【讨论】：

我试过了，没用，这里没有解释。