Question

我的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>

放置此菜单后，我的顶部菜单的边距将向右移动。如何解决？

Answer 1

您可以在margin: 0;和body上使用.fixedmenu，并在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-顶部菜单和正文冲突

1 个答案: