Question

我正在尝试编写一个个人网站，我正在1366x768笔记本电脑屏幕上测试我的网站，还附带一个1920x1080的显示器。我的div的布局在笔记本电脑上看起来很完美，但是当我将网站移动到显示器时，其中一个div标签喜欢稍微移动（这很奇怪，因为其他看起来很好。

这是一张图片来说明我的问题：

enter image description here

我希望导航div的边框与字母k和d对齐，这在显示笔记本电脑显示器的顶部图像上工作正常，但正如您在下面的图像上看到的那样，div会移动。红线表示实际的对齐方式，绿线表示我想要的样子。

这是我的div的CSS：

nav{

    position: absolute;
    top: 60%;
    margin-left: 40%;
    margin-right: 20%;
    border: solid;

}

我的逻辑是，如果我使用百分比进行定位，那么div将适应不同的屏幕大小并保持固定在相同的位置，但似乎并非如此。关于如何修复它的任何想法都将非常感激。

Answer 1

将导航放入与徽标相同的div中（比如说类.container）。

.container { position:relative; }

现在只需将导航器相对于.container定位即可。任何决议都应该存在。

Answer 2

对不起我糟糕的英语，我练习（我希望能理解你的要求）

如果你想使用ABSOLUTE POSITION，你应该试试这个：将NAV插入TEXT容器，然后使用此css

nav {
    position: absolute;
    top: "your percentage";
    left:0;
    right:0;
    margin:0 auto;
    border: solid;
}

以这种方式，你总是将盒子居中（根据父容器）。