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

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

来源

2015-05-12 Johnz

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

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

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

我不知道如果你与我们共享所有的代码，而是从你提供的165像素应该是罚款的最小宽度代码。如果有更多的代码存在让导航栏的宽度不同，那么您可能需要调整min-width:的像素数量。

来源

2015-05-12 04:34:28 Chawbee

-1

这应该工作

ul { 
    white-space: nowrap; 
}

来源

2015-05-12 04:43:42 tojowe

我试过了，它没有工作，这里没有解释。 –

这应该工作。

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

来源

2016-06-13 09:23:21 bright

你能扩充这个答案吗？ http://stackoverflow.com/help/how-to-answer –

谢谢，只是最小宽度做到了！ – extrablade

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

回答

相关问题