如何在窗口調整大小時保持導航欄不移位

我是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

如何在窗口調整大小時保持導航欄不移位

回答

相關問題