Question

所以我在我的网站上使用Dreamweaver，我有一个名为＆＃34; Page＆＃34;我使用的最小宽度为1000像素，并以屏幕为中心。目前，页面div中的所有内容都以我的屏幕为中心，但是在另一个屏幕上，它进一步向左移动。如何在Page div中获取每个元素的左侧属性（或等效），以将边缘视为页面div的边缘而不是浏览器窗口的边缘？

我的代码片段：#Title和#Home是页面div中的菜单项。

    body {
     background: url(../images/background-texture%20d.jpg);
 }

 #page {
    z-index: 1;
    width: 1000px;
    min-height: 1257px;
    margin-left: auto;
    margin-right: auto;
 }

  #title {
     z-index: 4;
     position: absolute;
     top:  -10px;
     left:  0px;
     margin: 0;
 }

 #Home {
     z-index: 4;
     position: absolute;
     top: 0px;
     left: 694px;
     width: 89px;
     height: 65px;
     margin: 0;
     background: url(../images/button%20texture%20b.jpg);
     border-style: solid;
     border-width: 1px;
     border-color: #7F7F7F;
     border-top: none;
     border-bottom: none;
     text-align: center;
 }

HTML代码

<!doctype html>
<html>
<head>
<link href="css/main.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id="page">
<div id="TopLinks">
</div>
<div id="HeaderContainer">
<img src="images/title g-u5076.png" id="title">   
<div id="Home">
<a href="/">HOME</a>
</div>
<div id="Guides"> 
<a href="/">GUIDES</a>
</div>  
<div id="Forum">
<a href="/">FORUM</a>
</div>
<div id="Blog">
<a href="/">BLOG</a>
</div>
<div id="Guilds">
<a href="/">GUILDS</a>
</div>
<div id="Play">
<a href="/">PLAY NOW</a>
</div> 
</div>
<div id="Top-Gradient">
</div>
<div id="PictureContainer-top">
</div>
</div>
</body>
</html>

Answer 1

我想你错过了如何制作菜单的想法。因此，为了向您展示菜单如何以及如何将事物置于中心的最佳实践，我为您制作了JSFiddle

HTML：

<nav>
    <ul>
        <li><a href="">HOME</a></li>
        <li><a href="">GUIDES</a></li>
        <li><a href="">FORUM</a></li>
        <li><a href="">BLOG</a></li>
    </ul>
</nav>

CSS：

ul{
    /*Reset margin and padding of ul*/
    margin:0;
    padding:0;

    /*Give fixed width needed for centering*/
    width:200px;

    /*Center the list*/
    margin:0 auto;

    /*Background to show what's centered*/
    background:#999;

    /*Center text if you really want things centered as much as possible*/
    text-align:center;
}
li{
    display:block;
}

所以真正发生的事情是你有一个<nav>和<ul>。 ul代表Unordered List，它们通常用于制作菜单。 ul有一些List Items <li>，其中包含锚标记，以使链接正常工作。当你想要在页面中居中的东西时，你必须给元素一个固定的。否则它将无法工作。

这里的诀窍是margin: 0 auto;，其中0代表height而auto代表width。 width会自动计算并以此方式居中。

我在代码中注意到的是，所有div都有一个位置absolute，如果这是有意义且非常需要的，请查看this post，在那里他们解释如何居中{{1}定位absolute。

希望这会有所帮助，您会找到一种方法来实现您的菜单。

使用Div Elements定位问题并使它们居中

1 个答案: