滾動條永久確定我的導航標記的大小

Question

我不確定還有其他描述：當出現滾動條並且由於溢出而滾動到右側時，我的nav標記被調整爲較短的字段。在任何情況下，圖片是更好：

在第二圖像，顯而易見的是，該領域中的長度已縮短。我不知道爲什麼會發生這種情況。這裏是我的代碼：

​​

的CSS：

@charset "utf-8"; 
/* CSS Document */ 

html { 
    font-size: 100%; 
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
    height: 100%; 
    background: url(../Images/bg.jpg) 
} 

body { 
    height: 100%; 
    overflow-y: hidden; 
    padding: 0; 
    margin: 0; 
} 

nav { 
    height: 40px; 
    width: 100%; 
    background: #455868; 
    font-size: 11pt; 
    font-family: 'PT Sans', Arial, sans-serif; 
    font-weight: bold; 
    position: relative; 
    border-bottom: 2px solid #283744; 
} 
nav ul { 
    padding: 0; 
    margin: 0 auto; 
    width: 900px; 
    height: 40px; 
} 

nav li { 
    display: inline; 
    float: left; 
} 

.clearfix:before, 
.clearfix:after { 
    content: " "; 
    display: table; 
} 
.clearfix:after { 
    clear: both; 
} 
.clearfix { 
    *zoom: 1; 
} 

nav a { 
    color: #fff; 
    display: inline-block; 
    width: 150px; 
    text-align: center; 
    text-decoration: none; 
    line-height: 40px; 
    text-shadow: 1px 1px 0px #283744; 
} 

nav li a { 
    border-right: 1px solid #576979; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
} 
nav li:last-child a { 
    border-right: 0; 
} 

nav a:hover, nav a:active { 
    background-color: #8c99a4; 
} 

nav a#pull { 
    display: none; 
} 

@media screen and (max-width: 600px) { 
nav { 
    height: auto; 
} 
nav ul { 
    width: 100%; 
    display: block; 
    height: auto; 
} 
nav li { 
    width: 50%; 
    float: left; 
    position: relative; 
} 
nav li a { 
    border-bottom: 1px solid #576979; 
    border-right: 1px solid #576979; 
} 
nav a { 
    text-align: left; 
    width: 100%; 
    text-indent: 25px; 
} 
} 

@media only screen and (max-width : 480px) { 
nav { 
    border-bottom: 0; 
} 
nav ul { 
    display: none; 
    height: auto; 
} 
    nav a#pull { 
    display: block; 
    background-color: #283744; 
    width: 100%; 
    position: relative; 
} 
nav a#pull:after { 
    content:""; 
    background: url(../Images/nav-icon.png) no-repeat; 
    width: 30px; 
    height: 30px; 
    display: inline-block; 
    position: absolute; 
    right: 15px; 
    top: 10px; 
} 
} 

@media only screen and (max-width : 320px) { 
nav li { 
    display: block; 
    float: none; 
    width: 100%; 
} 
nav li a { 
    border-bottom: 1px solid #576979; 
} 
} 

任何有識之士的讚賞。

Answer 1

您的導航寬度爲100％！它只會是身體100％的寬度。如果您向右滾動，則導航不會變大。文本只是從中溢出。我建議將每個導航項目的背景設置爲純色。

編輯：奇數修正：將您的width: 100%從導航欄更改爲min-width: 100%。那（以及nav是塊元素的事實）是限制寬度的原因。爲了確保它流向右側，請將display: inline-block置於其位置。

Answer 2

是的，這是一個惱人的。

將寬度設置爲100％的問題在於縮放或不同的屏幕尺寸可能會根據其他CSS規則進行不同的渲染。

你應該設置一個min-width任何你期望的通常寬度。

對我來說min-width:960px通常會這樣做，但它看起來像使用900px的值。

因此將min-width:900px添加到您的導航{}樣式規則中。或者你使用的任何寬度。

nav { 
    height: 40px; 
    width: 100%; 
    background: #455868; 
    font-size: 11pt; 
    font-family: 'PT Sans', Arial, sans-serif; 
    font-weight: bold; 
    position: relative; 
    border-bottom: 2px solid #283744; 
    min-width:900px; 
} 

Answer 3

找到你的nav a css樣式並替換這個CSS並完成。

DEMO http://jsfiddle.net/bC63a/

新

nav a { 
    color: #fff; 
    background: #455868; 
    border-bottom: 2px solid #283744; 
    display: inline-block; 
    width: 150px; 
    text-align: center; 
    text-decoration: none; 
    line-height: 40px; 
    text-shadow: 1px 1px 0px #283744; 
} 

OLD

nav a { 
    color: #fff; 
    display: inline-block; 
    width: 150px; 
    text-align: center; 
    text-decoration: none; 
    line-height: 40px; 
    text-shadow: 1px 1px 0px #283744; 
}