Question

所以我有导航和子导航......

<div class="headerNav">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#" class='galleryNavToggle'>Gallery</a></li>
<li><a href="#" class='galleryNavInfoToggle'>Info</a></li>
</ul>
</div><!--headerNav-->

<div class="headerNavGallery" id="headerNavGallery" style="display:none;">
<ul>
<li><a href="Categories.php?action=view">Categoies</a></li>
<li><a href="Products.php?action=view">Products</a></li>
</ul>
</div><!--headerNavGallery-->

<div class="headerNavInfo" id="headerNavInfo" style="display:none;">
<ul>
<li><a href="willRuppel.php?action=view">William Ruppel</a></li>
<li><a href="CV.php?action=view">CV</a></li>
<li><a href="artistBio.php?action=view">Artist Bio</a></li>
<li><a href="Video.php?action=view">Video</a></li>
<li><a href="contact.php?action=view">Contact</a></li>
</ul>
</div><!--headerNavInfo-->

和他们的CSS

.headerNav {
    color: #FFFFFF;
    padding-left: 150px;
    padding-top: 148px;
}

.headerNavGallery {
    color: #000000;
    padding-left: 25px;
    padding-top: 0;
}

.headerNavInfo {
    color: #000000;
    padding-left: 177px;
    padding-top: 0;
}

我的问题是，无论宽度如何，我如何让它们在每个屏幕上保持相同的位置？

Answer 1

您使用的是包装元素吗？您可以使用父元素作为body元素的第一个子元素，并包含所有html。

然后，你可以给这个包装元素一个特殊的wifth（960px）是非常常见的，并且它也像屏幕中心那样：

<html>
<head>
<style type="text/css">

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

</style>
</head>
<body>
<div id="wrapper">
 <!-- ALL YOUR HTML HERE -->
</div>
</body>
</html>

导航和子导航在不同的屏幕上有不同的位置

1 个答案: