Question

请允许我说我是HTML / CSS的新手，所以请原谅我非常草率的代码。基本上，我想要的只是带有我名字的标题，然后是右上角的导航栏。但是当我调整窗口大小时，导航栏会粘在右上方并与我的标题重叠。我只想让它留下来！

我不确定这是否足够，但我会把我的CSS代码放在下面。我已经尝试了一个多小时让它从左上角调整大小。我尝试了位置：固定/右：0px但没有任何反应。如果你们能帮助我，我将永远感激不尽。

div#wrapper {
    width: 98%;
    margin: auto;
}

div.header {
background-color:black;
height: 80px;
width:100%;
position:fixed;
}

div.menu {
    width:600px;
    height:100px;
    position:absolute;
    right:0px;
    margin-right:10px;
}

div.menu  p {
display:inline-block;
float:right;
margin-top:0px;

}

div.menu a { 
    text-decoration: none;
    display:block;
    width: 100px;
    padding: 30px 10px 29px 10px;
    text-align:center;
    margin-left: -5px;
    color: black;
    background-color:white;
    font-family: Trajan Pro;
    border-left: 1px solid black;
    border-right: 1px solid black;
    font-size:16px;

}

提前非常感谢!!

Answer 1

我的理解是这样的：您想要调整窗口大小，但是您希望不调整导航栏的大小。如果这就是你问你应该做什么很简单。

您当前的子父母关系是这样的（如果我理解正确的话）

<div id="wrapper">
    <div id="menu"></div>
    <div id="navigationbar"></div>
</div>

你想要的是这个：

<div id="wrapper">
    <div id="menu"></div>
</div>
<div id="navigationbar"></div>

这样您的导航栏div不会调整大小或不会改变位置。要让它卡在右上方，你需要的是css代码：

.navigationbar{position:absolute; top:0px; right:0px;}

如果这不能解决您的问题，请说明您在此处调整大小或分享链接的方式，以便我们更轻松地理解。

HTML / CSS - 缩小窗口大小但导航菜单卡在屏幕的右上角

1 个答案: