我在我的 html 上遇到了这个问题
CSS:
.fixedmenu {
overflow: hidden;
background-color:rgb(153,0,51);
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
font-size:2em;
}
#bodybox {
border:0px;
width:80%;
padding:0px;
margin-left: auto;
margin-right: auto;
background:red;
}
这是我的正文代码
<div class="fixedmenu">
<div style="float: left;color:white;padding:0.5% 0% 0.5% 3%;">YggDrasil ||</div>
<div style="float: right;color:white;padding:0.5% 3% 0.5% 0%;"> || Login</div>
<div style="margin:0 auto; width:300px;color:white;padding:0.5% 0% 0.5% 0%;"> Welcome to YggDrasil. </div>
</div>
在这段代码之前它仍然运行良好
<div id="bodybox">
hi
</div>
放置这个之后，我的顶部菜单的边距将向右移动。如何解决？
最佳答案
您可以在 body 和 .fixedmenu 上使用 margin: 0; 并设置 position:relative; 在你的 .fixedmenu 和 #bodybox 上。这样一切都会很好地适合您的窗口，您将能够在菜单后看到新的 div。我还将菜单上的宽度更改为 width: 100vw;。
<body>
<div class="fixedmenu">
<div style="float: left;color:white;padding:0.5% 0% 0.5% 3%;">YggDrasil ||</div>
<div style="float: right;color:white;padding:0.5% 3% 0.5% 0%;"> || Login</div>
<div style="margin:0 auto; width:300px;color:white;padding:0.5% 0% 0.5% 0%;"> Welcome to YggDrasil. </div>
</div>
<div id="bodybox"> hi</div>
</body>
应用的样式:
body{
margin: 0;
}
.fixedmenu {
overflow: hidden;
background-color: rgb(153, 0, 51);
position: fixed;
/* Set the navbar to fixed position */
top: 0;
/* Position the navbar at the top of the page */
width: 100vw;
/* Full width */
font-size: 2em;
margin: 0;
position:relative;
}
#bodybox {
border: 0px;
width: 80%;
padding: 0px;
margin-left: auto;
margin-right: auto;
background: red;
position:relative;
}
我的结果:
关于html-顶部菜单和正文冲突，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53629910/