Question

我在设置网站菜单时遇到问题。整个网站都有利润率：auto。由于某种原因，菜单不会集中，因为它是包含链接，按钮的div。每个按钮链接都有一个背景图像。这是因为按钮的图像宽度为315像素，包括叠加图像。例如，当用户保留此图像时，图像向左移动105px并显示鼠标悬停选项。（查看代码）

这是.html :(不介意按钮的id名称，不想改变：D，是的，我是瑞典语）

    <body>
    <!--Banner-->
    <img src="/header/picture.png" />
    <img src="/header/banner.png" />

    <!--Pre-loads the images for menu-->
    <img src="/header/start.png" style="display: none;" />
    <img src="/header/bestall.png" style="display: none;" />
    <img src="/header/priser.png" style="display: none;" />
    <img src="/header/omoss.png" style="display: none;" />
    <img src="/header/support.png" style="display: none;" />
    <img src="/header/filarkiv.png" style="display: none;" />

    <!--Menu-->
    <div id="menu">
    <a href="index.php" id="startknapp"></a>
    <a href="index.php" id="priserknapp"></a>
    <a href="index.php" id="bestallknapp"></a>
    <a href="index.php" id="omossknapp"></a>
    <a href="index.php" id="supportknapp"></a>
    <a href="index.php" id="filarkivknapp"></a>
    <img src="/header/box.png" id="box" />
    </div>

    <div id="content">
    <p>Hi!</p>
    <p>This is one paragraph</p>
    <p>And this is another.</p>
    </div>
    </body>

这就是我在菜单的css中设置按钮的方法：

    /*Startknappen*/
    #startknapp
    {
        position: absolute;
        left: 0px;
        width: 105px;
        height: 35px;
        text-decoration: none;
        background-image:url(start.png);
    }

    #startknapp:hover 
    {
        background-position: -105px 0; 
    }

    #startknapp:active 
    {
        text-decoration: none;
    }

    /*Priserknappen*/
    #priserknapp
    {
        position: absolute;
        left: 105px;
        width: 105px;
        height: 35px;
        text-decoration: none;
        background-image:url(priser.png);
    }

    #priserknapp:hover 
    {
        background-position: -105px 0;
    }

    #priserknapp:active 
    {
        text-decoration: none;
    }

    ... and so on for the other buttons...

以下是一些.css：

    #html, body 
    {
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        width: 800px;
        height: 800px;
        margin: auto;
    }

    #menu
    {
        height: 35px;
        width: 800px;
    }

    #content
    {
        position: absolute;
        width: 800px;
        background-color: ;
    }

现在的问题是，如上所述，菜单不会集中。但是当我做位置时：绝对;对于#menu它确实是集中的。唯一的问题是内容然后重叠菜单，我不希望这样。我希望内容在菜单底部后启动0px。以下是一些外观图片：

不会集中： http://imageshack.us/photo/my-images/15/leftra.png

位置：绝对： http://imageshack.us/photo/my-images/443/centerh.png

希望有人可以帮助我做到这一点。在此先感谢：）

Answer 1

尚未关闭，我不知道你是否还没有关闭身体标签，或者只是将你的身份标签剪掉了。

此外，如果您将菜单项设置为绝对位置，则＃菜单的样式应包括“position：relative”，这样它们将相对于菜单容器而不是页面正文定位。

另外，我不确定这段代码会做什么：

#html, body 
    {
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        width: 800px;
        height: 800px;
        margin: auto;
    }

你试图用一个宽度集中放置它，但是然后说它应该伸展到每个角落，部分说“top：0; right：0 etc”

拥有这样的包装器会好得多：

HTML：

<div id="wrapper">
    All content in here
</div>

CSS：

#wrapper { margin: 0 auto; width: 800px; }

编辑：还注意到，很高兴看到其他人使用Ubuntu;）

Edit2 ：如果您使用浮点数而不是“位置：绝对数”来定位导航项目会更好，请参阅here

有关定位的更多信息，请参阅here

Answer 2

正如Sean Dunwoody所说，你需要增加位置：相对于div.menu。使用position：absolute时，项目将定位到要为其指定position属性的最后一项。由于除了菜单项之外还没有定位任何div，它们会通过div的层次结构向上移动并将自身定位在body标签上。通过添加位置：相对于div.menu，你告诉div.menu它需要在哪里（即相对于其他所有），然后按钮知道它们需要在哪里（完全定位于它们的父div，div 。菜单）

不能以div为中心

2 个答案: