Question

我创建了一个包含简单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所说，当有滚动条时导航栏会被移动，但我不想总是显示滚动条。有没有更好的方法来解决这个问题？

Answer 1

正如@Autista_z所说，它只是因为滚动条。

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

检查此更新小提琴。

它没有修复，但我想告诉你它根本不是什么问题。

我所做的只是添加了这行代码

body {
  overflow: scroll;
}

固定的右侧导航栏移动了大量文字

1 个答案: