Question

我正在学习HTML，而我正在努力制作一个标题，其中会有有用的链接。我用它做了一个大div和4个div但是div里面没有小div，请看这里：My webpage

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

刚解决它，不得不改变立场：相对;位置：绝对;

Answer 1

你必须先了解定位。

您的child div's应为absolute，父亲为div relative。

请参阅给定链接以获取示例。 Positioning examples:

Answer 2

在菜单中使用绝对定位不是最佳做法。在这种情况下，玩具只需在您的“小”div上使用float: left，并添加一些class，其中包含float: left和边距或sth。

如果您希望将来在菜单中添加一些新项目，这将非常有用。

Answer 3

父（#header）不应该是绝对的，使它相对。里面的div可以是绝对的。但是这种定位不适合菜单。

而是像http://jsfiddle.net/VKewr/

一样使用float

如何调整和定位另一个div内的div

3 个答案: