Question

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

这是我的代码：

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;}，但这没有帮助。导航栏仍然不会保持静止。

Answer 1

这应该有用。

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

Answer 2

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

在你的情况下，它将在.nav类

中

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

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

Answer 3

这应该有效

ul {
  white-space: nowrap;
}

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

3 个答案: