固定正確的導航欄移動很多文字

我創建了一個簡單和簡單的HTML和一些CSS的導航列表。它應該位於頁面的右側，並且如果頁面上有很多內容或者用戶向下滾動，則不應該移動。固定正確的導航欄移動很多文字

在向我的網站添加了一些示例文本後，我發現導航元素更多位於左側。爲什麼會發生這種情況，我該如何解決這個問題？

這是第一個小例子，只有一些文字：

而且多用一些文字在導航列表比第一個例子更左邊的一個片段：

注意：兩個具有相同的CSS樣式定義：

ul { 
    list-style-type: none; 
    padding: 0; 
    width: 200px; 
    float: right; 
    margin: 0 5em 0 0; 
    right: 0%; 
    top: 5%; 
    position: fixed; 
} 

li a { 
    display: block; 
    padding: 8px 16px; 
    text-decoration: none; 
} 

.navigation div { 
    margin-left: 60px; 
} 

#content div { 
    width: 65% !important; 
}

編輯：

由於@Autista_z提到的導航欄時，有一個滾動條，但我不想總是顯示滾動條被移動。沒有更好的方法來解決這個問題嗎？

來源

2016-08-11 Peter

滾動條的Becouse。它使視口水平變小 –

聲音合乎邏輯。有沒有什麼好方法可以解決這個問題？我對前端開發並不熟悉，也不想要* hacky *修復。 – Peter

看不到你想描述的內容。這兩個鏈接似乎都很好，導航保持固定在右側。 – Lee

正如@Autista_z所說，這只是因爲滾動條。

`https://jsfiddle.net/sck6nL6w/4/'

檢查此更新小提琴。

這不是修復，但我想告訴你它是如何不是一個問題。

我所做的加入這行代碼

body { 
    overflow: scroll; 
}

來源

2016-08-11 13:24:13 Lucian

這將始終顯示兩個滾動條不是我想要的。沒有其他辦法嗎？ – Peter

我已經更新了小提琴。再次檢查。使用'overflow-y：scroll' – Lucian

感謝您的努力，但始終顯示滾動條（即使沒有必要）也不是我想要的。：/ – Peter

固定正確的導航欄移動很多文字

回答

相關問題