Html 如何在其他div内调整和定位div

Html 如何在其他div内调整和定位div,html,css,web,Html,Css,Web,我正在学习HTML,我正在尝试制作一个标题,其中会有有用的链接。我用一个大div和4个div制作了这个,但是小div不在这个div内,请看这里: 我的css代码是: #header{ width:1200px; height:25px; background-color:#0A475C; position:absolute; left:50%; margin-left:-600px;

我正在学习HTML,我正在尝试制作一个标题,其中会有有用的链接。我用一个大div和4个div制作了这个,但是小div不在这个div内,请看这里:

我的css代码是:

#header{
        width:1200px;
        height:25px;
        background-color:#0A475C;
        position:absolute;
        left:50%;
        margin-left:-600px;
        -moz-border-radius: 15px 15px 15px 15px;
        webkit-border-radius: 15px 15px 15px 15px;
        border-radius: 15px 15px 15px 15px;
}
#login{
        width:300px;
        position:relative;
        line-height:25px;
        left:0px;
        text-align:center;
}
#allroms{
        width:400px;
        line-height:25px
        position:relative;
        left:300px;
        text-align:center;
}
#sobremi{
        width:300px;
        line-height:25px;
        position:relative;
        left:600px;
        text-align:center;
}
#downloads{
        width:300px;
        position:relative;
        line-height:25px;
        left:900px;
        text-align:center;
}
和html:

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/pagina.css">
        <title>Mi página</title>
    </head>
    <body>
        <div id="header">
            <div id="login"><a href="pagina/login.html">Log-in</a></div>
            <div id="allroms"><a href="pagina/roms.html">Todas las ROMS</a></div>
            <div id="sobremi"><a href="pagina/sobremi.html">Sobre mí</a></div>
            <div id="downloads"><a href="pagina/downloads.html">Descargas</a></div>
        </div>
    </body> 
</html>

米帕吉纳

刚解决它,就不得不改变立场:相对;位置:绝对

你必须先了解定位

您的
子div的
应该是
绝对的
,而父div的相对的

请参考给定的链接以获取示例。
在某事物中使用绝对定位并不像菜单那样简单,这不是最佳做法。在这种情况下,玩具可以简单地在“小”div上使用
float:left
,并添加一些
class
,其中包含
float:left
和边距或其他内容

如果您将来想在菜单中添加一些新项目,它将非常有用。

父项(#标题)不应该是绝对的,而应该是相对的。里面的div可以是绝对的。但这种定位不推荐用于菜单

而是像下面这样使用
float